Css 清除浮动 clear

by · 2018年03月21日 · 434 Words · ~1min reading time | Improve on


原文链接： Css 清除浮动 clear

  1. clear 不能用于非块级元素，因此如果对内联元素应用 clear 来清除浮动，则不会有任何效果，除非改变该内联元素的属性为
    display：block

  2. 如果某元素应用 clear 清除浮动， 则此元素设置的上边距 margin-top 会被忽略，如果希望此元素与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距 margin-bottom

  3. float 浮动非替换元素，必须为其指定 width，否则元素的width趋于0，而导致浮动元素不能完整显示
    float的另一种办法就是在其后面的元素中设置

    width：100%;
overflow：hidden

    设置clear的原因：
    在使用 float 后，因为在其 float 父容器没有设置高度的情况下，父元素无法检测出该float的元素的高度，从而使该float元素溢出父元素，如果我们想让该float元素识别出内部元素的高度，需要使用clear属性来清除浮动。

    1. 父元素添加 clearfix 解决父元素高度塌陷问题
      html <div class="container clearfix"> <div class="left"></div> <div class="right"></div> </div>
.container{
    width: 300px;
    border: 1px solid #000;
    background-color: #aaa;
}
.left{
    width: 100px;
    height: 100px;
    background-color: #ffff00;
    float: left;

}
.right{
    width: 100px;
    height: 100px;
    background-color: #fa0000;
    float: right;
}

.clearfix {
    *zoom: 1;/*For IE 6/7 触发hasLayout*/
}
.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

Tags:

`