理解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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。