从零开始玩转HTML5前端 学习笔记3

清除浮动方式一：

给父元素添加高度。但是这种方式用得很少。

清除浮动方式二：

给后面的盒子添加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之后 外面的盒子不被顶下来。