CSS读书笔记（3）---清除浮动的几种方法

浮动元素容易造成页面错位现象。下面说说关于清除浮动的几种方法。

首先。先创建一个浮动导致错位的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS---浮动</title>
    <style>
        .float-left{
            float: left;
            width: 200px;
            height: 200px;
            border: 2px solid red;
        }
        .float-right{
            float: right;
            width: 200px;
            height: 200px;
            border: 2px solid blue;
        }
        .float-box{
            background-color: pink;
        }
        .no-float{
            color: #fff;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="float-box">
        <div class="float-left">左浮动</div>
        <div class="float-right">右浮动</div>
    </div>
    <div class="no-float">被浮动影响地元素</div>
</body>
</html>
浮动导致的错位HTML结构

可以看出，左右浮动元素和class为no-float的正常元素重叠了。而且左右浮动元素由于浮动，没法撑开父元素float-box的高度，因此父元素的背景元素也没有显示出来。

解决这个问题，一般可以用下面几个方法：

  • 在浮动元素的父元素也即是class为float-box的元素最后加入一个div标签, 
    <div class="float-box">
        <div class="float-left">左浮动</div>
        <div class="float-right">右浮动</div>
        <div class="clear-float"></div>
</div>

    属性设置如下：

    .clear-float{
        clear:both;
}

    这样就可以清除浮动了并且父元素float-box也有高度了。

  • 在浮动元素的父元素之后加入BR标签，<br/>标签具有clear属性，其属性值为left/right/all。
  • <div class="float-box">
    <div class="float-left">左浮动</div>
    <div class="float-right">右浮动</div>
    <br clear="all"/>
</div>

    这方法的效果同第一种方法。

  • 在浮动元素的父元素中加入overflow属性。如下 
    .float-box{
        overflow: hidden;
        background-color: #eee;
}

    overflow:hidden;但在内容过多导致溢出时会自动隐藏多余的内容

　　　利用overflow:hidden涉及到BFC块级格式化上下文。通过在父元素中设置

  1. float:left/right;
  2. overflow除了visible之外的值，
  3. display (table-cell，table-caption，inline-block) 
  4. position（absolute，fixed） 
  5. fieldset元素

　　   均可以触发BFC，BFC可以闭合浮动，因此可以达到清除浮动的效果。

  • 利用伪类:after消除浮动。可以理解为在浮动元素之后加入了一个伪类控制的伪类层，这是一个没有高度没有内容并且带有clear:both属性的层，可以消除浮动。 
    .float-box:after{
        display: block;
        visibility: visible;/*设置伪类层为块元素并且可见*/
        clear:both;/*清除浮动*/
        height: 0；
        line-height:0;
        font-size:0;
        content: "";/*伪类层内容清空*/
}

    最后一种方法更深的分离了HTML和CSS，更加方便我们维护页面。

posted @ 2016-11-09 11:05  my_notebook  阅读(243)  评论(0)    收藏  举报