CSS浮動

簡介
其實(shí)，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細(xì)節(jié)。這篇講CSS浮動,在CSS中浮動主要是為了使得塊級元素在一行顯示。

文檔流(normal flow)

CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動和定位。

html語言當(dāng)中另外一個相當(dāng)重要的概念----------標(biāo)準(zhǔn)流！或者普通流。普通流實(shí)際上就是一個網(wǎng)頁內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨(dú)占一行，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。

浮動(float)

元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;}
屬性值 描述
left 元素向左浮動
right 元素向右浮動
none 元素不浮動（默認(rèn)值）

浮動詳細(xì)內(nèi)幕特性

浮動脫離標(biāo)準(zhǔn)流，不占位置，會影響標(biāo)準(zhǔn)流。浮動只有左右浮動。

浮動的元素總是找理它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。

浮動的元素.jpg

浮動的元素排列位置，跟上一個元素（塊級）有關(guān)系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標(biāo)準(zhǔn)流，則A元素的頂部會和上一個元素的底部對齊。

浮動的元素排列位置.png

元素（塊或者行內(nèi)塊都可以）添加浮動后，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動。

清除浮動

浮動本質(zhì)是用來做一些文字混排效果的，但是被拿來做布局用，則會有很多的問題出現(xiàn)，由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產(chǎn)生影響，為了解決這些問題，此時就需要在該元素中清除浮動。

準(zhǔn)確地說，并不是清除浮動，而是清除浮動后造成的影響，如果浮動一開始就是一個美麗的錯誤，那么請用正確的方法挽救它。

清除浮動主要為了解決父級元素因為子級浮動引起內(nèi)部高度為0 的問題。

清除浮動1.jpg

清除浮動2.jpg

清除浮動的方法

其實(shí)本質(zhì)叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}
屬性值 描述
left 不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響）
right 不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）
both 同時清除左右兩側(cè)浮動的影響

額外標(biāo)簽法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標(biāo)簽例如 <div style=”clear:both”></div>，或則其他標(biāo)簽br等亦可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1  {
            background-color: pink;
            width: 600px;
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
        <div class="son2"></div>
        <!-- 在浮動的盒子后面添加元素 -->
        <div class="clear"></div>
    </div>   
    <div class="box2"></div>
</body>
</html>

優(yōu)點(diǎn)： 通俗易懂，書寫方便

缺點(diǎn)： 添加許多無意義的標(biāo)簽，結(jié)構(gòu)化較差。

父級添加overflow屬性方法

可以通過觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1  {
            background-color: pink;
            width: 600px;
            /* 觸發(fā)BFC */
            overflow: hidden;  
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>   
    <div class="box2"></div>
</body>
</html>

(overflow:hidden在嵌套塊元素垂直外邊距合并會出現(xiàn)，css盒模型中講過)
優(yōu)點(diǎn)： 代碼簡潔

缺點(diǎn)： 內(nèi)容增多時候容易造成不會自動換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

使用after偽元素清除浮動

:after 方式為空元素的升級版，好處是不用單獨(dú)加標(biāo)簽了

使用方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1  {
            background-color: pink;
            width: 600px;
        }
        .box2 {
            width: 600px;
            height: 240px;
            background-color: purple;
        }
        .son1 {
            width: 150px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
        .son2 {
            width: 300px;
            height: 100px;
            background-color: hotpink;
            float: left;
        }
        .clearfix:after {
            content: "."; 
            display: block; 
            height: 0;
            clear: both;
            visibility: hidden; 
        }
        .clearfix {
            *zoom: 1;
        }

    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>   
    <div class="box2"></div>
</body>
</html>

優(yōu)點(diǎn)： 符合閉合浮動思想 結(jié)構(gòu)語義化正確

缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

代表網(wǎng)站： 百度、淘寶網(wǎng)、網(wǎng)易等

注意： content:"." 里面盡量跟一個小點(diǎn)，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。

使用before和after雙偽元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 這句話可以出發(fā)BFC BFC可以清除浮動,BFC我們后面講 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優(yōu)點(diǎn)： 代碼更簡潔

缺點(diǎn)： 由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

代表網(wǎng)站： 小米、騰訊等

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,796評論 1贊 92
  • 自我總結(jié)： 浮動是實(shí)現(xiàn)布局的一種常見方式 浮動脫離普通文檔流，即頁面渲染時，盒模型按標(biāo)準(zhǔn)會將父元素所設(shè)置的屬性將頁...
    饑人谷_遠(yuǎn)方閱讀 430評論 0贊 0
  • 1.浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響? 何謂浮動元素？有什么特征？所謂浮動...
    草鞋弟閱讀 832評論 0贊 1
  • 作者：楊元原文地址：http://www.cnblogs.com/iyangyuan 很早以前就接觸過CSS，但對...
    IT程序獅閱讀 662評論 1贊 12
  • 普通流 CSS有三種定位機(jī)制，普通流（標(biāo)準(zhǔn)流）、浮動、定位。普通流、標(biāo)準(zhǔn)流、文檔流實(shí)際上就是一個網(wǎng)頁內(nèi)標(biāo)簽元素從上...
    哎呦呦胖子斌閱讀 265評論 0贊 0