清除浮动

1.问题

style 格式 显示

2.解决

【1】给父元素(box1)设置高度，在企业开发中能不写高度就不写高度，所以通常不采用

原理：

box1是有高度的，所以不会消失了

【2】方法2：使用clear属性right，both，left，none（默认)

none:默认取值，按照浮动元素的排序规则来排序（左找左，右找右）

left:不要找前面左浮动的元素

right：不要找前面有浮动的元素

both：即不找左也不找右 ----企业常用这个

原理：不要去找前面的浮动元素

给后面的盒子添加clear属性

给box2添加属性

注意:

当我们给如果给该元素设置了clear属性，那么margin对它是无效了

【3】方法三

隔墙法：外墙法，内墙法  不常用代码阅读量降低

外墙法：在第一个盒子和第二盒子之间加一个块级元素，然后设置clear属性，第二个盒子的margin-top可以用的，但是第一个盒子的margin-bottom是没有用的，只需要给加的这个块级元素加一个高度就可以了  企业喜欢用

内墙法：添加一个块级元素添加到第一个盒子的最后一个元素的后面，给新的元素设置clear属性

注意点:第二个盒子的margin-top可以用的，但是第一个盒子的margin-bottom是有用的，还可以给额外的元素添加高度

两者的区别：

内墙法可以撑起盒子1的高度，外墙法不可以

【3】方法四    这个最推荐的方式

伪元素  给指定标签的内容添加一个子元素，或者给指定标签的内容后面添加一个子元素,没有高度，visibility：hide将添加的子元素隐藏了

div::before{                     

content:"";

display:block;

}

div::after{

content:"";

display:block;

}

第四个方式类似内墙法

注意点，兼容问题要加入一句话来兼容IE6

.box1{

*zoom:1;

}

【5】清除浮动的方式5

overflow：hidden可以将超出标签范围的内容裁剪掉，可以用来清除浮动,

给第一个盒子设置overflow属性

考虑兼容IE6

.box1{

*zoom:1;

}

overflow的第三个好处：可以通过它让里面的盒子设置margin-top外边的盒子不会被顶下来