CSS重要屬性之float學(xué)習(xí)心得(分享)

我們來看看CSS重要屬性--float。
以下內(nèi)容分為如下小節(jié):
1:float屬性
2:float屬性的特性
2.1:float之文字環(huán)繞效果
2.2:float之父元素高度塌陷
3:清除浮動的方法
3.1:html法
3.2:css偽元素法
4:float去空格化
5:float元素塊狀化
6:float流體布局
6.1:單側(cè)固定
6.2:DOM與顯示位置不同的單側(cè)固定
6.3:DOM與顯示位置相同的單側(cè)固定
6.4:智能布局
1:float屬性
float,顧名思義是漂浮,浮動的意思。但是在css中,它被理解成浮動。float有四個屬性,即
- float:none;
- float:left;
- float:rightright;
- float:inherit;
比較常用的兩個屬性值是左浮動和右浮動。在接下來的分享中,只會拿左浮動作為例子。其他浮動屬性值與左浮動原理相同。
2:float屬性的特性
2.1:float之文字環(huán)繞效果
浮動的初衷就是為了文字環(huán)繞效果。
看如下代碼和demo。
- <div class="container">
- <div class="content"></div>
- <p>
- Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
- </p>
- </div>
- .container {
- width: 300px;
- height: 300px;
- border: 1px solid black;
- }
- .container .content {
- float: left;
- width: 150px;
- height: 150px;
- background-color: lightpink;
- margin: 5px;
- }
content 元素設(shè)置了左浮動,使div元素脫離文檔流,文字在其周圍壞繞顯示。
2.2:float之父元素高度塌陷
以div元素為例。div元素的高度會通過內(nèi)容自動撐開。也就是說,內(nèi)容有多少,高度就有多高。但是當(dāng)內(nèi)部元素設(shè)置了float屬性之后,會是父元素高度塌陷。代碼和實(shí)例如下。
- <div class="container">
- <p>
- Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
- </p>
- </div>
如下,塌陷后css和demo。
- .container {
- width: 300px;
- border: 1px solid black;
- }
- .container p {
- float: left;
- }
3:清除浮動的方法
那么問題來了,如果內(nèi)部元素要設(shè)置浮動,那如何避免父元素高度塌陷的問題呢?
有同學(xué)肯定會想,直接在父元素設(shè)置高度不就可以了嗎?這在實(shí)際中是不行的。因?yàn)槿绻潭烁冈氐母叨?,那如果之后想在其添加?nèi)容,不是又要去修改css代碼了,特麻煩。
那解決父元素高度塌陷有兩種方法。
3.1:父元素底部添加空div,然后在添加屬性clear : both。
代碼如下。
- <div class="container">
- <p>
- Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
- </p>
- <div class="clearfix"></div>
- </div>
- .container {
- width: 300px;
- border: 1px solid black;
- }
- .container p {
- float: left;
- }
- .container .clearfix {
- overflow: hidden;
- *zoom: 1;
- }
3.2:父元素設(shè)置偽類after。
- <div class="container">
- <p>
- Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
- </p>
- </div>
- .container {
- width: 300px;
- border: 1px solid black;
- *zoom: 1;
- }
- .container p {
- float: left;
- }
- .container:after {
- content: "";
- display: table;
- clear: both;
- }
4:float元素去空格化
是什么意思呢?在平時的編碼中,為了要符合HTML編碼規(guī)范,都會為html標(biāo)簽添加縮進(jìn),達(dá)到美觀的效果??墒强s進(jìn)時就會產(chǎn)生空格,也就是 。當(dāng)給元素設(shè)置左浮動時,元素本身左浮動,剩余的空格會被擠到最后,也就是上文所說的文字環(huán)繞效果。但是,要記住一點(diǎn), 和回車敲下的空格的效果略有不同。
5:float元素塊狀化
在為內(nèi)聯(lián)元素設(shè)置浮動屬性之后,display屬性由inline變成block。并且可以為內(nèi)聯(lián)元素設(shè)置寬高。使用float加width屬性可以實(shí)現(xiàn)一些簡單的固定寬度的布局效果。
6:float流體布局
6.1:單側(cè)固定,右側(cè)自適應(yīng)的布局。
- <div class="container">
- <div class="left">左浮動+固定寬度</div>
- <div class="right">右邊自適應(yīng)寬度+margin-left</div>
- </div>
- .container{
- max-width:90%;
- margin:0 auto;
- }
- .left{
- float:left;
- text-align:center;
- background-color: lightpink;
- width: 200px;
- height:300px;
- }
- .rightright{
- background-color: lightyellow;
- margin-left:200px;
- height:300px;
- padding-left:10px;
- }
6.2:DOM與顯示位置不同的單側(cè)固定
- <div class="container">
- <div class="right">右浮動+固定寬度</div>
- <div class="left">左邊自適應(yīng)寬度+margin-right</div>
- </div>
- .container {
- max-width: 90%;
- margin: 0 auto;
- }
- .container .rightright {
- float: rightright;
- width: 200px;
- height: 200px;
- background-color: lightpink;
- }
- .container .left {
- background-color: lightyellow;
- margin-right: 200px;
- height: 300px;
- padding-left: 10px;
- }
也就是說,html元素與顯示在頁面上的元素位置不相同。
6.3:DOM與顯示位置相同的單側(cè)固定
- <div class="container">
- <div class="left-content">
- <!-- 左浮動+width100% -->
- <div class="left">margin-right</div>
- </div>
- <div class="right">左浮動+固定寬度+margin-left負(fù)值</div>
- </div>
- .container {
- max-width: 90%;
- margin: 0 auto;
- }
- .container .rightright {
- float: left;
- width: 200px;
- height: 200px;
- background-color: lightpink;
- margin-left: -200px;
- height: 300px;
- }
- .container .left {
- background-color: lightyellow;
- margin-right: 200px;
- height: 300px;
- text-align: center;
- }
6.4:智能布局
所謂智能布局,就是兩欄都不需要設(shè)置寬度,寬度隨內(nèi)容自適應(yīng)。
- <div class="container">
- <div class="left">
- float+margin-right+自適應(yīng)寬度
- </div>
- <div class="right">
- display:table-cell ---IE8+;
- display:inline-block ---IE7+;
- 自適應(yīng)寬度
- </div>
- </div>
- .container {
- max-width: 90%;
- margin: 0 auto;
- }
- .container .left {
- float: left;
- height: 300px;
- background-color: lightpink;
- }
- .container .rightright {
- display: table-cell;
- *display: inline-block;
- height: 300px;
- background-color: lightyellow;
- }
- .container {
- max-width: 90%;
- margin: 0 auto;
- }
- .container .left {
- float: left;
- height: 300px;
- background-color: lightpink;
- }
- .container .rightright {
- display: table-cell;
- *display: inline-block;
- height: 300px;
- background-color: lightyellow;
- }
總結(jié)以下:
1:當(dāng)一個元素設(shè)置float屬性時,會使元素塊狀化。
2:float屬性的創(chuàng)造初衷就是為了文字環(huán)繞效果而生的。
3:float元素會使父元素高度塌陷。
4:float元素會除去換行帶來的空格。
5:使用float可以實(shí)現(xiàn)兩欄自適應(yīng)的布局。
以上這篇CSS重要屬性之float學(xué)習(xí)心得(分享)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
- 本文主要介紹了css中float的用法,以及網(wǎng)頁中常用的幾種布局方式。具有一定的參考價值,下面跟著小編一起來看下吧2017-01-10
- 本篇文章主要介紹了css中Float屬性, 顧名思義,就是讓設(shè)置的標(biāo)簽產(chǎn)生浮動效果,就是脫離原來頁面的標(biāo)準(zhǔn)輸出流。2016-12-21
css(display,float,position)深入理解
下面小編就為大家?guī)硪黄猚ss(display,float,position)深入理解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-17- 下面小編就為大家?guī)硪黄仙U刢ss中float的用法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-18
CSS使用float屬性設(shè)置浮動元素的實(shí)例教程
這篇文章主要介紹了CSS使用float屬性設(shè)置浮動元素的實(shí)例教程,包括使用overflow清除浮動的方法,需要的朋友可以參考下2016-07-07使用CSS的overflow屬性防止float撐開div的方法
我們在使用float設(shè)定浮動元素的時候經(jīng)常會遇到撐破div的情況,其中一種解決方法即是利用overflow: hidden,這里我們就來看一下使用CSS的overflow屬性防止float撐開div的方法:2016-07-07- 使元素脫離文檔流,按照指定方向發(fā)生移動,遇到父級邊界或者相鄰的浮動元素停了下來。本文給大家?guī)砹薈SS清除浮動float的三種方法小結(jié),感興趣的朋友跟隨腳本之家小編一起2018-03-13