理解clear：both属性

时间 2019-12-05

标签理解 clear 属性繁體版

原文原文链接

在前端开发布局中，常常会被float这个属性搞晕，尤为是新手css

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会从新排列。
Float（浮动），每每是用于图像，但它在布局时同样很是有用。前端

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽可能向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止。
浮动元素以后的元素将围绕它。
浮动元素以前的元素将不会受到影响。
若是图像是右浮动，下面的文本流将环绕在它左边：布局

img 
{
    float:right;
}
</style>
</head>

<body>
<p>在下面的段落中，咱们添加了一个 <b>float:right</b> 的图片。致使图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

这是float的常见用法：对于文字包围图片
可是在div布局中这里举一个例子：spa

<head>
    <style>
        .ob-title{
            background-color: orange;
        }
        .ob-body{
            background-color: #ddd;
        }
        .ob-body .menu{
            float: left;
            width: 200px;
            background-color: pink;
        }
        .ob-body .content{
            float: left;
            background-color: aquamarine;
        }
       /* .clearfix:after{    /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/
            content: "";
            display: block;  /*block宽度会横向填充满屏幕，在父元素的最后追加一个height:0，占满屏幕的看不见的细长条*/
            line-height: 0;
            clear: both;  /*这个最下边细长条左右两边都清除float*/
        }*/ //先不用这个style
    </style>
</head>
<body style="margin: 10px;">
    <div class="ob-title">头部信息</div>
    <div class="ob-body clearfix">   <!--此处调用尾类-->
        <div class="menu">左侧菜单</div>
        <div class="content">右侧内容</div>
        <!--<div style="clear: both;"></div>-->  <!--第二种写法，不用调用clearfix类-->
    </div>
</body>

结果：

灰色的背景色并无添加到第二行，由于第二行都是float的，和.ob-body不在一个层面上，第二行浮在.ob-body上层
如今咱们把.clearfix的注释拿掉code

<style>
        .ob-title{
            background-color: orange;
        }
        .ob-body{
            background-color: #ddd;
        }
        .ob-body .menu{
            float: left;
            width: 200px;
            background-color: pink;
        }
        .ob-body .content{
            float: left;
            background-color: aquamarine;
        }
        .clearfix:after{    /*在.clearfix后边追加一个隐藏的block,带一个clear:both属性*/
            content: "";
            display: block;  /*block宽度会横向填充满屏幕，在父元素的最后追加一个height:0，占满屏幕的看不见的细长条*/
            line-height: 0;
            clear: both;  /*这个最下边细长条左右两边都清除float*/
        }
    </style>
</head>
<body style="margin: 10px;">
    <div class="ob-title">头部信息</div>
    <div class="ob-body clearfix">   <!--此处调用尾类-->
        <div class="menu">左侧菜单</div>
        <div class="content">右侧内容</div>
        <!--<div style="clear: both;"></div>-->  <!--第二种写法，不用调用clearfix类-->
    </div>

结果：
图片

最后解析一下：为何加了clearfix就ok了。
两种写法其实一个意思，就是在.ob-body的最后加入一个空的<div>(只要是块的就行，由于只有块，才能够横向撑满)，
这个<div>其实就是一个看不见的细长条，由于他在.ob-body的最下边，而且并非float的，必定会受到.ob-body的背景色的控制，他的存在定义了.ob-body的高度，因此高度范围内都会被灰色的背景色影响到。而且这个最下边的<div>必需要有clear:both,否则若是只是标准流，会紧贴在第一行的底部，固然不能涵盖第二行了，其实这个例子里使用clear:left也有效（由于第二行都是float:left），但为了通用性，就使用both吧.而且也验证了:这个规则只能影响使用清除的元素自己，不能影响其余元素,clear了隐藏div的both。ip