浮动

浮动：
一、解除父级边框塌陷方法
1：父级添加伪类标签after
（div class=“clear”）
（div class=“layer01”）（img src=“image/photo-1.jpg” alt=“日用品” />/div
（div class=“layer04”）浮动的盒子……/div
/div
.clear:after{
content: ‘’; /在clear类后面添加内容为空/
display: block; /把添加的内容转化为块元素/
clear: both; /清除这个元素两边的浮动/
} 【推荐使用的方法】【没有副作用】
2：浮动元素后加空的div
(div class=“father”)
div class=“layer01”>（img src=“image/photo-1.jpg” alt=“日用品” /）(/div)
div class=“layer04”>浮动的盒子……(/div)
div class=“clear”>（/div)
(/div)
.clear{ clear: both; margin: 0; padding: 0;}
3：父级元素添加overflow属性
.class {【overflow: hidden】;border:1px #000 solid; }【下拉列表场景不能用】
4：设置父级元素的高度
.class｛height=“100px”｝【降低扩展性】
二、clear属性
1：clear：left；清除左边浮动对自身的影响
2：clear：right；清除右边浮动对自身的影响
3：clear：both；清除两边浮动对自身的影响
4：clear：none；清除
三、块元素并排显示（dispiay）
1：display：block；改变为块级元素、一列显示（默认块div）
2：display：inline；变为行内元素、一行显示（span）
3：display：inline-block；变为行内块级元素、在一行，块显示
4：display：none；元素不显示、隐藏
5：inline-block与float浮动的区别
（ display:inline-block：
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
位置方向不可控制，会解析空格
IE 6、IE 7上不支持
float ：
可以让元素排在一行并且支持宽度和高度，可以决定排列方向
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式）
四、网页布局
1：标准文档流组成：块级元素、内级元素
2：常见的文档流