清除浮动

#面试题 #css

  1. 在浮动元素后面添加 clear:both的空 div 元素
1
2
3
4
5
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both"></div>
</div>
  1. 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div> 

.container{
    width: 300px;
    background-color: #aaa;
    overflow:hidden;
    zoom:1;   /*IE6*/
}
  1. 使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div class="container clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    .clearfix{
        zoom: 1; /*IE6*/
    }
    .clearfix:after{
        content: ".";
        height: 0;
        clear: both;
        display: block;
        visibility: hidden;
    }

推荐使用第三种方法，不会在页面新增div，文档结构更加清晰

CSS 面试题

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！