浮动

清除浮动

float属性

float设置元素是否浮动或如何浮动，任何元素都可以使用浮动，无论是块级元素div、ul等等，还是行内元素都可以浮动，任何被声明float的元素都会自动被设置成块元素，有了块级元素的各种特点，原来的行内元素可以设置宽高，可以设置内外边距。

浮动元素的特点：

浮动元素之间的外边距不会发生折叠。
不管什么元素都可以被“浮动”，浮动元素的display属性值为block。
被浮动的元素，若是非替换元素（如span、a），一般显示指定宽度值。
浮动元素之间不会重叠。定位元素则不同，有可能会重叠。
向左浮动元素的左外边界是其包含块的左内边界或者是之前向左浮动元素的右边界。同理，可以得到向右浮动元素的特点。

float属性常用的语法：

（1）float：left；左浮动
（2）float：right；右浮动
（3）float：none；无浮动

清除浮动

（1）用伪元素::after来清除浮动，该伪元素默认为行内元素。
例如：
#container::after {
content: “”;
display: block;
clear: both;
}
（2）添加新的元素，应用clear：both；
新建选择器命名为".clearfix",对应样式为“clear： both；”,然后在父级元素"“结束前加如div，class=“clearfix”，即可清除浮动。
（3）父级样式添加overflow：hidden；清楚浮动
添加新的元素，应用clear：both；
新建选择器命名为”.clearfix",对应样式为“clear： both；”,然后在父级元素""结束前加如div，class=“clearfix”，即可清除浮动