CSS之浮動佈局（float，浮動原理，清除/閉合浮動方法）

時間 2019-11-18

標籤 css 浮動佈局 float 原理清除閉合方法欄目 CSS 简体版

原文原文鏈接

css之浮動佈局

本人博客：查看文章css

1.什麼是浮動：在咱們佈局的時用到的一種技術，可以方便咱們進行佈局，經過讓元素浮動，咱們可使元素在水平上左右移動，再經過margin屬性調整位置

2.浮動的原理：使當前元素脫離普通流，至關於浮動起來同樣，浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣

3.浮動的生成：使用css屬性float：left/right/none 左浮動/右浮動/不浮動（默認）

4.浮動的影響：

對附近的元素佈局形成改變，使得佈局混亂
浮動後的元素能夠設置寬度和高度等，也就是說元素浮動後會變成塊級元素，但我更傾向於說元素變成inline-block類型的元素，即同時擁有塊級與行內元素的特徵
由於浮動元素脫離了普通流，會出現一種高度坍塌的現象：原來的父容器高度是當前元素A撐開的，可是當A元素浮動後，脫離普通流浮動起來，那父容器的高度就坍塌（前提是父容器高度小於A元素高度），下面用圖來講明一下高度坍塌：

5.清除浮動與閉合浮動

先說說我我的的理解：我將解釋一下我理解的閉合浮動與清除浮動

清除浮動：使用clear元素清除外面浮動，解決外面浮動對本身的影響

閉合浮動：當前塊級中，其子元素使用了浮動，會給當前塊內部和塊外部的佈局帶來影響，因此將當前塊中的浮動閉合，能將影響最大化清除。舉個例子:

代碼：

<style type="text/css">
.box1{
        width: 200px;
        border: 2px solid #0f0;
        /*overflow: hidden;*/
    }
    .box1 .child-1{
        float: left;
        height: 100px;
        width: 100px;
        background: #fd0;
    }
    .box1 .child-2{
        float: left;
        height: 100px;
        width: 100px;
        background: #fba;
    }
    .box2{
        width: 200px;
        height: 150px;
        border: 2px solid #00f;
        /* clear: both; */
    }
</style>
<body>
    <div class="box1">
        <div class="child-1">child-1</div>
        <div class="child-2">child-2</div>
    </div>
    <div class="box2"></div>
</body>

圖一：原始圖

圖二：child-1 和 child-2 進行浮動

圖三:區分清除浮動與閉合浮動（我的理解：在外面解決問題，內部問題未解決）

清除浮動：對box2使用：clear：both

圖四：閉合浮動（在內部解決問題：同時解決外部問題）

閉合浮動：對box1使用overflow：hidden（其中一種方式，後面還有更好的方式）

所以我更願意稱其爲閉合浮動:其實也能夠叫清除浮動，不過我就是以爲閉合浮動比較形象。

6.閉合浮動方法(常見的幾個方法)：既然浮動帶來這些不利的影響，咱們就要想辦法清除它。

其一：經過在浮動元素的末尾添加一個空元素，設置 clear：both屬性；

缺點：成本過高，額外添加了一個元素，維護困難

<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div style="clear: both;"></div>
</div>
<div class="box2"></div>

其二：經過設置父元素 overflow 或者display：table 屬性來閉合浮動，給box1添加overflow：hidden

其三（推薦）：使用僞元素：after,下面是代碼，給box1添加上clearfloat這class便可

/*適配ie6*/
.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
height:0;
content:"";
clear:both;
visibility:hidden;
}

以上寫出我的對浮動的理解，若有錯誤，歡迎指出html

做者：Ry-yuan佈局

如需轉載請標明出處：原文地址：http://www.cnblogs.com/Ry-yuan/p/6816290.htmlspa

相關標籤/搜索

每日一句

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