网页布局准则：
(1)多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
(2)先设置好盒子的大小，之后设置盒子的位置
先简单介绍一下浮动的必要性：
<1>普通流（标准流/文档流）
标签按照规定好的默认方式排列
1.块级元素独占一行，从上到下排列
2.行内元素从左到右排列，碰到父元素边缘自动换行
3.行内块元素
<2>浮动
例如：想让多个div放在一行
可以利用行内块化（display:inline-block,但是块与块之间有默认的空隙）
但是块间的空隙不好控制，所以引出浮动改变标签默认的排列方式（块之间没有空隙）。
语法：选择器 {float： 属性值;}
属性值有none(默认为不浮动)，left，right。
浮动的特性:
(1)浮动的元素会脱离标准流（简称为“脱标”）
*脱离标准普通流的控制（浮）移动到指定的位置（动）---脱标
*浮动的盒子不在保留原来的位置，其他盒子会占原来的位置，形成叠加
(2)浮动的元素在一行内显示并且元素的顶部对齐(宽度不够则换行)
(3)浮动的元素会具有行内块元素的特性
任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后都具有行内块元素相似的特性。
*将行内元素类似转换成行内块元素，不需要转换成行内块元素
*将块级元素类似转换称行内块元素，若不设置宽度，则块的宽度取决于盒子内部的快读（行内块元素的特性）
浮动布局的两个注意点：
（1）浮动与标准流的父盒子搭配
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
即“浮动元素经常与标准流父级搭配使用”
（2）如果一个元素浮动了，理论上其余的兄弟元素也要浮动。
浮动的标准流只会影响浮动盒子后面的标准流，不会影响前面的标准流。
清除浮动：
为什么要清除浮动？
（1）父盒子的高度不一定定义，可以用子盒子来撑开父盒子
（2）若子盒子浮动了（子盒子浮动影响了下面的布局）
加之不给父盒子高度出现的问题，元素浮动则不占位置，则父元素高度为0
清除浮动的本质：在父盒子没有给出高度的情况下，清除浮动元素造成的影响
CSS语法：
选择器（clear：属性;）
属性值：left，right，both(同时清除左右浮动元素)
清除浮动的策略：闭合浮动
其他清除浮动的方法：
(1)额外标签发也称为隔墙法
即在浮动元素末尾添加一个空的标签
<div style="clear.both"></div>div>或者是其他标签</br>
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，机构化差。
注意：要求这个新的空标签必须是块级标签。
(2)父级天机overflow属性
通过给父级添加overflow属性，将其属性值设置为hidden（最常见）、auto或者scroll
overflow： hidden；既可防止外边距合并，清除浮动
优点：代码简洁；
缺点：无法显示溢出的部分
(3)父级添加after伪元素
额外标签法的升级版，也是给父元素添加（此处省略代码）
(4)父级添加双伪元素
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
