CSS 浮动

标准文档流

标准文档流也称为正常文档流

标准文档流是按照HTML元素的类型来定位的。HTML元素可以分为块级元素和行内元素。块级元素会按照从上到下的垂直顺序来排列。行内元素则按照水平顺序来排列盒子，从左到右还是从右到左取决于文档顺序

浮动定位

浮动定位采用float属性实现

float属性值可以为left或者right

当HTML元素设置float属性后，HTML元素将脱离标准文档流，也就是说HTML元素将不在页面占用空间

#box1{
        float:left;
        width:120px;
        height:60px;
        border:2px solid #f00;
}
#box2{
        width:150px;
        height:100px;
        border:2px solid #0f0;
}
<div id="box1"></div>
<div id="box2"></div>

当HTML元素设置float属性后，该元素会尽可能的向左（float：left；）或向右（float：right；）移动，知道接触到父对象或是另一个浮动元素的边界为止

#parent{
        width:300px;
        border:2px solid #00f;
}
#s1{
        float:left;
        width:120px;
        height:60px;
        margin-right:10px;
        border:2px solid #f00;
}
#s2{
        float:left;
        width:150px;
        height:100px;
        border:2px solid #0f0;
}
<div id="parent">
<div id="s1"></div>
<div id="s2"></div>

如果当前行没有足够的空间给浮动对象，该对象会往下移动直到有足够的空间为止

#parent{
        width:300px;
        border:2px solid #00f;
}
#s1{
        float:left;
        width:120px;
        height:60px;
        margin-right:10px;
        border:2px solid #f00;
}
#s2{
        float:left;
        width:100px;
        height:100px;
        border:2px solid #0f0;
}
#s3{
        float:left;
        width:120px;
        height:70px;
        border:2px solid #ff0
}
<div id="parent">
<div id="s1"></div>
<div id="s2"></div>
<div id="s3"></div>

浮动定位的限制

浮动元素的外边缘不会超过其父元素的内边缘

浮动元素不会互相重叠

浮动元素不会上下浮动

清除浮动

清楚浮动通过clear属性实现

clear的属性值可以为left、right、both

clear属性规定HTML元素的哪一侧不允许其他浮动元素

内容属性

该属性用于定义元素之前或者之后放置的生成内容

该属性与:before以及:after伪元素选择器配合使用，来插入生成内容

默认情况下，通过内容属性生成的内容是行内元素，但可以通过display属性控制其显示方式

显示方式属性

HTML元素可以分为块级对象和内联对象

HTML元素的显示方式可以通过display属性进行控制

display的属性值可以为none、block、inline

各浏览器兼容的清楚浮动方式

.clear:after{
display:block;
height:0;
content:'.';
visibility:hidden;
clear:both;
}
.clear{
zoom:1;
}

在清除浮动时，只需要将该类应用给浮动对象的父对象即可

最新写法

.clear{
overflow:hidden;/*或者auto*/
}