清除浮动

1. 清除元素方式一

  • 给前面一个父元素设置高度

注意点:在企业开发中,能不写高度尽量不写高度,所以这个方式不太推荐使用

2. 清除元素方式二

  • 给后面的盒子添加clear属性
    clear取值:
    none:默认取值,按照浮动元素排序规则来排序
    left:不要找前面的左浮动
    right:不要找前面的右浮动
    both:不要找前面的左浮动和右浮动

注意点:当我们给某个元素添加clear属性的之后,这个元素的margin属性会失效

3. 清除元素方式三

  • 隔墙法

外墙法:给两个盒子中间添加块级元素并设置clear:both;
注意点:
外墙法可以让第二个盒子使用margin-top属性,但是不可以让第一个盒子使用margin-bottom属性.所以使用外墙法的时候,一般会给添加的块级元素设置高度代替margin-topmargin-bottom.




    
    浮动问题
    


    

我是段落1

我是段落1

我是段落1

我是段落2

我是段落2

我是段落2

内墙法

外墙法:给第一个盒子所有子元素最后添加块级元素并设置clear:both;
注意点:
内墙法可以让第二个盒子使用margin-top属性,同时也可以让第一个盒子使用margin-bottom属性,还可以给额外添加的块级元素设置高度。




    
    浮动问题
    


    

我是段落1

我是段落1

我是段落1

我是段落2

我是段落2

我是段落2

4. 外墙法和内墙法的区别

  • 外墙法不能撑起第一个盒子的高度,内墙法可以。

5. 企业开发中不常用隔墙法来清除浮动

你可能感兴趣的:(清除浮动)