第七章浮动

一、标准文件流

1.布局

第一种：1头(网站导航)-3左中右-1尾(网站版权)
第二种：1头(网站导航)-2左右-1尾(网站版权)
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

2.标准文档流组成

块级元素（block）和 内联元素（inline）
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

二、display属性

简述块元素和行内元素的概念及特性

块元素：宽默认100%，高度由内容决定，可以手动改变宽和高
行内元素：宽和高由内容决定，不能修改

1.属性的值

2.特性

①块级元素与行级元素的转变
②控制块元素排到一行，中间有空隙，无法使元素紧贴
③控制元素的显示和隐藏

/*设置块元素边框*/
div{border: 1px red solid;}
/*设置行内元素边框*/            
span{border: 1px green solid;}
/*inline：内联元素默认值
将块元素显示为内联元素    */
div{display: inline;}
/*block:块元素默认值
将行内元素显示为块元素*/
span{display: block;}
/*inline-block：行内块元素，
具备内联元素一行显示，具备块元素的设置宽高，
抛弃了块元素的独占一行，抛弃了内联元素的不能设置宽高，
缺点：中间有空隙，不能紧贴*/
div{display: inline-block}

三、浮动float

浮起来；下面的元素上提，但是内容会躲开浮动元素 ，进行展示

边框塌陷

边框是由内容撑起来的，当所有的元素都浮动了起来，边框里面的内容就脱离了标准文档流，边框就塌陷了

四、解决边框塌陷

1.设置高度(不建议)

2.清除浮动clear

设置给哪个元素，这个元素往下去，直至左边或者右边或者两边都没有浮动元素

3.溢出处理overflow

哪个盒子塌陷，在哪个盒子元素上加

1.修剪不可见hidden

2.修剪横竖滚动轴scroll

缺点：横坐标有滚动条

3.修剪滚动条auto

如果不超出边框不会显示滚动条，横竖滚动条都可以控制

4.默认值visible

4.添加伪类after

div:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/  
    clear: both;         /*清除这个元素两边的浮动*/
}

5.总结

清除浮动，防止父级边框塌陷的四种方法
①浮动元素后面加空div
简单，空div会造成HTML代码冗余
②设置父元素的高度
简单，元素固定高会降低扩展性
③父级添加overflow属性
简单，下拉列表框的场景不能用
④父级添加伪类after
写法比上面稍微复杂一点，但是没有副作用，推荐使用

五、inline-block和float的区别

1.display:inline-block

①可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
②位置方向不可控制，会解析空格
③IE 6、IE 7上不支持

2.float

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向
认同float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式