css提供了三种传统的布局方式
1.普通流（标准流）
所谓的普通流就是标签按照规定好的方式进行排列（块元素、行内元素 标准流布局）
2.浮动
3.定位
浮动（float）
本质-css摆放盒子
为什么需要浮动？
有很多的布局效果，标准流没有办法完成的，此时我们就需要利用浮动完成布局
因为浮动可以改变标签的默认的排列方式
浮动最典型的应用就是多个块元素一行排列显示
网页布局的第一准则：块元素、纵向排列 浮动
float属性创建浮动框
选择器{float:属性值；}
none left right
浮动的特性：
1.浮动的元素脱离了标准流（脱标）
2.浮动的元素会一行显示并且元素顶部对齐
3.浮动的元素具有行内块元素的特性
浮动的盒子不会保留原有的位置
块元素 没有设置宽度 默认父宽 添加内容之后，大小根据内容决定
为了约束浮动元素的为宗旨，策略：先用标准流父元素排列上下位置
浮动布局的注意点：
1.浮动和标准流的父盒子搭配
标准流父元素排列成上下位置。 之后内部子元素采用浮动排列成左右位置
2.一个盒子里面有许多子盒子 浮动理论上其他兄弟元素也要浮动
一个盒子中有许多小盒子，其中一个盒子浮动了。那么其他的兄弟盒子应该浮动
为什么清除浮动：
子盒子浮动的本质其实就是消除浮动元素造成后面的影响
如果父盒子本身有高度，则此时不要清楚浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流
清楚浮动的语法
选择器{clear：属性值；}
left 清除左侧浮动的影响
right 清楚右侧浮动的影响
both 同时清除左右两侧的浮动的影响 几乎只用 clear：both；
清楚浮动方法：
1.额外标签法 W3C
额外标签法（隔墙法） 会在浮动元素的末尾添加一个空的标签
优点：通俗易懂，书写方便
缺点：添加了无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素
2.父级添加overflow属性，hidden，auto，scroll。
优点：代码简洁
缺点：无法显示溢出的部分
3.父级添加：after伪元素 IE6-7 不兼容：after
：after伪元素额外标签法的升级版，也是给父元素添加
优点：没有新增标签，结构简单
缺点：照顾低版本的浏览器
代表网站：淘宝，百度
4.父级添加双伪元素
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：某马 腾讯 小米
清除浮动总结：
为什么需要清楚浮动
1.父级没有宽度
2.子盒子浮动了
3.影响下面布局了，我们就应该清楚浮动
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
