清除浮动方式一:
给父元素添加高度。但是这种方式用得很少。
清除浮动方式二:
给后面的盒子添加clear属性
clear:none 默认取值
left:不要给前面的左浮动元素
right:不要找前面的右浮动元素
both:不要找左右浮动元素(推荐使用)
-----------添加clear属性后 margin属性失效 。body设置boder后margin仍然有效 但是不推荐
清除浮动方式三:
1、隔墙法
2、外墙法
两个盒子之间添加一个块级元素 然后设置 clear:both 属性 。第二个盒子margin属性可用 第一个盒子不可用。直接设置添加的块级元素即可
3、内墙法
在第一个盒子中所有子元素最后添加一个块级元素 然后设置clear:both属性。盒子1可使用margin-bottom 盒子2可使用margin-top
4、内外墙区别:外墙不可撑起盒子1高度 内墙可以。
伪元素选择器:
给指定标签内容前面(标签名称::before)或者后面(标签名称::after)添加一个子元素。
.div::after{
conter:"";
display:block;
height:0px;
visibility:hedden; 隐藏添加元素
clear:both;
}
清除浮动方式四:
伪元素选择器
兼容IE6方法 .div{ *zoom:1}
清除浮动方式五:
overflow:hidden
1、将超出标签的内容剪裁掉
2、清除浮动
3、overflow:hidden 让盒子设置margin-top之后 外面的盒子不被顶下来。