<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>float浮动技巧 用浮动实现块元素的同行显示</title>
</head>
<style>
.box1{
width:100px;
height:100px;
background:#f00;
/* 浮动：强制性的让元素在最左边或最右边
浮动以后，元素就不占据原来的空间，后面的元素可以顶替浮动元素原来的位置-------脱离标准流
*/
float:right;
}
/* 若要两个块元素排成一行，就给这两个元素都设置浮动 */
.box2{
width:200px;
height:200px;
background:#0f0;
float:right;
}
.box3{
width:300px;
height:300px;
background:#00f;
float:right;
}
/*
让多个元素按顺序横向排列：
1.按顺序写标签
2.让这多个元素往一个方向浮动
*/
</style>
<body>
<div class="box1">
1
</div>
<div class="box2">
2
</div>
<div class="box3">
3
</div>
</body>
</html>
以上html代码中有3个div，它们都是块元素，即独占一行，当使用float浮动后，可以在同行显示。
总结：
1、浮动元素都是行内块
2、浮动元素脱离标准流
3、浮动元素不会覆盖文字
4、浮动元素不占用标准流的空间，所以浮动元素撑不开父元素的高度
若要多个块元素排成一行 就给这些块元素都加上浮动（主要意义）
浮动使用口诀：让兄弟元素一起浮动。
所有的元素添加浮动后都会自动变成行内块元素
让多个元素顺序排列的方法：
1、按照顺序写标签。
2、让多个元素向同一个方向浮动。
3、浮动的语法：(folat:left;folat:right;folat:none;)
|
窥视卡
雷达卡
发表于 2023-2-1 12:27:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 13:25:42
