HTML5 07_浮动

一.浮动(Float)

1.文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中，元素在文档流中的特点如下：

①块元素：块元素在文档流中会独占一行，块元素会自上向下排列

②行内元素：行内元素在文档流中只占自身的大小，会默认从左向右排列

2.浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动的元素虽然会脱离正常的文档流，但它还是会影响到正常文档流中的文字排版

3.浮动的特点

①浮动会脱离标准流

②浮动会影响元素的显示方式

③浮动元素彼此相邻

④浮动都在父盒里

4.清除浮动

①对浮动元素父级设置适合CSS高度

②清除浮动：clear属性

③父级div定义 overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动

④伪元素清除浮动

.afterfix::after{
 display: block;
 content: "";
 clear: both; 
}