碼迷,mamicode.com
首頁 > Web開發 > 詳細

CSS float詳解

時間:2019-06-19 12:02:53      閱讀:14      評論:0      收藏:0      [點我收藏+]

標簽:one   mic   splay   偽元素   at詳解   區分   width   布局   外部   

前言:在我們寫CSS樣式的時候,float,position,display,overflow這幾個關鍵字用得比較多。

弄清楚他們之間的原理,我們可以更高效的寫出我們想要的布局。

作者:Ry-yuan

原文地址:http://www.cnblogs.com/Ry-yuan/p/6816290.html

一、float

1.什么是浮動:在我們布局的時用到的一種技術,能夠方便我們進行布局,通過讓元素浮動,我們可以使元素在水平上左右移動,再通過margin屬性調整位置

2.浮動的原理:使當前元素脫離普通流,相當于浮動起來一樣,浮動的框可以左右移動,直至它的外邊緣遇到包含框或者另一個浮動框的邊緣

3.浮動的生成:使用css屬性float:left/right/none 左浮動/右浮動/不浮動(默認)

4.浮動的影響:

    •   對附近的元素布局造成改變,使得布局混亂

    •   浮動后的元素可以設置寬度和高度等,也就是說元素浮動后會變成塊級元素,但我更傾向于說元素變成inline-block類型的元素,即同時擁有塊級與行內元素的特征

    •   因為浮動元素脫離了普通流,會出現一種高度坍塌的現象:原來的父容器高度是當前元素A撐開的,但是當A元素浮動后,脫離普通流浮動起來,那父容器的高度就坍塌(前提是父容器高度小于A元素高度),下面用圖來說明一下高度坍塌:

                            技術圖片       技術圖片

5.清除浮動與閉合浮動
    先說說我個人的理解:我將解釋一下我理解的閉合浮動與清除浮動
    清除浮動:使用clear元素清除外面浮動,解決外面浮動對自己的影響
    閉合浮動:當前塊級中,其子元素使用了浮動,會給當前塊內部和塊外部的布局帶來影響,所以將當前塊中的浮動閉合,能將影響最大化清除。舉個例子:

     ex:

    

<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;
}

 

 

 

CSS float詳解

標簽:one   mic   splay   偽元素   at詳解   區分   width   布局   外部   

原文地址:https://www.cnblogs.com/ning123/p/11050440.html

(0)
(0)
   
舉報
評論 一句話評論(0
0條  
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
公式规律下期单双