「Web前端開發(fā)」-16-CSS浮動(dòng)

節(jié)課介紹CSS的浮動(dòng)。

動(dòng)是css里面布局用的最多的屬性。

一個(gè)span標(biāo)簽不需要轉(zhuǎn)成塊級(jí)元素, 就能夠設(shè)置寬度、高度了。所以能夠證明一件事兒, 就是所有標(biāo)簽已經(jīng)不區(qū)分行內(nèi)、塊了。

也就是說, 一旦一個(gè)元素浮動(dòng)了, 那么, 將能夠并排了, 并且能夠設(shè)置寬高了, 無論它原來是個(gè)div還是個(gè)span。

浮動(dòng)的性質(zhì)：脫標(biāo)、貼邊、字圍、收縮。

浮動(dòng)的元素脫標(biāo)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
    float: left;
    width: 300px;
    height: 400px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 400px;
    height: 400px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

兩個(gè)元素并排了, 并且兩個(gè)元素都能夠設(shè)置寬度、高度了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
    float: left;
    width: 200px;
    height: 200px;
    background-color: orange;
}
</style>
</head>
<body>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

也就是說, 一旦一個(gè)元素浮動(dòng)了, 那么, 將能夠并排了, 并且能夠設(shè)置寬高了, 無論它原來是個(gè)div還是個(gè)span。

浮動(dòng)的元素互相貼靠

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body{
    font-size: 60px;
}
.box1{
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}
.box2{
    float: left;
    width: 120px;
    height: 220px;
    background-color: gold;
}
.box3{
    float: left;
    width: 340px;
    height: 300px;
    background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

浮動(dòng)的元素有"字圍"效果

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
width: 344px;
height: 516px;
background-color: orange;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文</p>
</body>
</html>

div擋住了p, 但是p中的文字不會(huì)被擋住, 形成"字圍"效果。如果將p標(biāo)記換成div, 則不會(huì)有"字圍"效果。

詳細(xì)案例見：CSS|實(shí)例|圖文混排

收縮：一個(gè)浮動(dòng)的元素, 如果沒有設(shè)置width, 那么將自動(dòng)收縮為文字的寬度(這點(diǎn)非常像行內(nèi)元素)。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
float: left;
background-color: gold;
}
</style>
</head>
<body>
<div>我是文字</div>
</body>
</html>

浮動(dòng)的清除

實(shí)驗(yàn)：現(xiàn)在有兩個(gè)div, div身上沒有任何屬性。每個(gè)div中都有l(wèi)i, 這些li都是浮動(dòng)的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
li{
float: left;
width: 90px;
height: 40px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

我們本以為這些li, 會(huì)分為兩排, 但是, 第二組中的第1個(gè)li, 去貼靠第一組中的最后一個(gè)li了。

第二個(gè)div中的li, 去貼第一個(gè)div中最后一個(gè)li的邊了。

原因就是因?yàn)閐iv沒有高度, 不能給自己浮動(dòng)的孩子們, 一個(gè)容器。

清除浮動(dòng)方法1：給浮動(dòng)的元素的祖先元素加高度。缺陷: 只限于父元素高度確定的情況下。

如果一個(gè)元素要浮動(dòng), 那么它的祖先元素一定要有高度。高度的盒子, 才能關(guān)住浮動(dòng)。

解決方法:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
div{
height: 50px; /* 為父元素設(shè)置高度 */
border: 1px solid #000;
}
li{
float: left;
width: 90px;
height: 40px;
margin-right: 10px;
background-color: gold;
/*文本居中*/
text-align: center;
}
</style>
</head>
<body>
<div>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div>
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動(dòng)方法2：clear:both;

網(wǎng)頁制作中, 高度height很少出現(xiàn)。為什么? 因?yàn)槟鼙粌?nèi)容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

腦弄大開：能不能不寫height, 也把浮動(dòng)清除了呢? 也讓浮動(dòng)之間, 互不影響呢?

clear:both;

clear就是清除, both指的是左浮動(dòng)、右浮動(dòng)都要清除。意思就是：清除別人對(duì)我的影響。

這種方法有一個(gè)非常大的、致命的問題, margin失效了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
li{
float: left;
width: 120px;
height: 40px;
text-align: center;
background-color: orange;
}
.box2{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動(dòng)方法3：隔墻法

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h8{
height: 8px;
_font-size:0;
}
.h10{
height: 10px;
_font-size:0;
}
.h12{
height: 12px;
_font-size:0;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
</div>

<div class="cl h8"></div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

墻! <div class="cl h18"></div>

這個(gè)墻, 隔開了兩部分浮動(dòng), 兩部分浮動(dòng), 互不影響。

近些年, 有演化出了"內(nèi)墻法"：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.box1{
background-color: gold;
}
li{
float: left;
width: 120px;
height: 40px;
background-color: orange;
text-align: center;
}
.cl{
clear: both;
}
.h16{
height: 16px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>HTML5</li>
<li>設(shè)計(jì)模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學(xué)習(xí)方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內(nèi)墻法本質(zhì)-給沒有高的父親撐出高

因?yàn)橐粋€(gè)父元素不可能被浮動(dòng)的子元素?fù)纬龈叨? 解決的方法：內(nèi)墻法

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
background-color: blue;
}
p{
float: left;
width: 100px;
height: 100px;
background-color: green;
}
.cl{ /* 如果沒有清除浮動(dòng) , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動(dòng)方法4：overflow:hidden;

overflow就是"溢出"的意思, hidden就是"隱藏"的意思。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
</style>
</head>
<body>
<div>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</div>
</body>
</html>

本意就是清除溢出到盒子外面的文字。但是, 前端開發(fā)工程師又發(fā)現(xiàn)了, 能做偏方。

一個(gè)父親不能被自己浮動(dòng)的兒子，撐出高度。但是, 只要給父親加上overflow:hidden; 那么, 父親就能被兒子撐出高了。這是一個(gè)偏方。

div{
    width: 400px;
    border: 10px solid black;
    overflow: hidden;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
border: 10px solid black;
}
.p1{
float: left;
width: 100px;
height: 150px;
background-color: red;
}
.p2{
float: left;
width: 100px;
height: 380px;
background-color: yellow;
}
.p3{
float: left;
width: 100px;
height: 120px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>
</div>
</body>
</html>

浮動(dòng)清除方法5: 利用偽元素清除浮動(dòng)

ss章節(jié)，本文僅列出筆者任務(wù)相對(duì)重要的知識(shí)點(diǎn)，且介紹上，針對(duì)重點(diǎn)。當(dāng)然，遺漏很正常，希望能收到你的意見。

1.盒子模型

盒子模型，個(gè)人的理解，就是一個(gè)來裝html標(biāo)簽的容器,包裝的內(nèi)容包括content+padding+border+margin。由這四個(gè)組成我們的"盒子"。

我們?nèi)粘？赡軙?huì)遇到不同的瀏覽器，元素的高寬不一致。除了可能是瀏覽器內(nèi)置的margin跟padding不同之外，也可能是IE跟w3c的盒子模型組成不同。

以下是兩種不同盒子的分類：

W3C盒子模型：可通過box-sizing: content-box來設(shè)置，他包含content+padding+border+margin。
IE盒子模型：可通過box-sizing: border-box來設(shè)置，content+margin。其中content包含border，padding

2.BFC

簡(jiǎn)單的個(gè)人理解，block formatting context，塊級(jí)格式化上下文。產(chǎn)生了BFC的，形成了獨(dú)立容器，他的特性就是不會(huì)在布局中影響到外邊的元素。

他的特性：

1)BFC邊距會(huì)重疊。
2)BFC的內(nèi)外元素互相不影響
3)BFC不會(huì)與浮動(dòng)元素發(fā)生重疊
4)BFC元素的高度計(jì)算會(huì)包括元素內(nèi)的浮動(dòng)元素的高度

觸發(fā)的條件是：

1)body 根元素
2)浮動(dòng)元素：float 除 none 以外的值
3)絕對(duì)定位元素：position (absolute、fixed)
4)display 為 inline-block、table-cells、flex，table-caption
5)overflow 除了 visible 以外的值 (hidden、auto、scroll)

此外，除了BFC，還有IFC、GFC、FFC的概念。我們簡(jiǎn)單了解一下。

GFC：可簡(jiǎn)單理解為grid布局
FFC：可簡(jiǎn)單理解為flex布局。
IFC:內(nèi)聯(lián)格式化上下文，簡(jiǎn)單理解為：inline-block。

水平方向上的 margin，border 和 padding在框之間得到保留。框在垂直方向上可以以不同的方式對(duì)齊：它們的頂部或底部對(duì)齊，或根據(jù)其中文字的基線對(duì)齊。包含那些框的長(zhǎng)方形區(qū)域，會(huì)形成一行，叫做行框。inline-block的元素的內(nèi)部是一個(gè)BFC，但是它本身可以和其它inline元素一起形成IFC。

3.flex布局

flex，即彈性布局。一個(gè)由css3引入，為我們的盒子屬性帶來靈活性的一種布局方式。一旦父級(jí)采用了flex布局，里邊的子控件將收flex布局限制，部分原本的樣式（如float:left）也會(huì)失效。

基本api不做講解，不熟悉可以看看：www.ruanyifeng.com/blog/2015/0…

特別注意：flex:0 0 30%的意義：等于flex-grow=0（默認(rèn)不放大）+flex-shrink=0（不縮小）+flex-basis=30%（項(xiàng)目占據(jù)主軸的空間）

4.css3新特性

背景，支持RGBA透明度，一次多背景圖
支持媒體查詢
支持陰影，漸變，陰影
支持邊框圖片，border-image: url(border.png) 30 30 round
支持transform位移系列
支持過渡效果transition
支持自定義字體
引入flex/grid布局
引入多種選擇器
其他不做詳細(xì)說明，有興趣搜一下css3新特性

5.圖片格式

前端的圖片分類格式,其實(shí)是性能優(yōu)化的很大部分。選擇好圖片的類型，對(duì)前端的性能影響非常大。

而前端對(duì)圖片的精髓，一方面是對(duì)圖片大小的評(píng)估，一方面是對(duì)圖片的類型選擇。

他的大小可以這樣判斷：

比如一張200*200的圖片大小，這時(shí)候，他的像素點(diǎn)有40000個(gè)。每個(gè)像素有 4 個(gè)通道，所以一共有160000個(gè)字節(jié),所以，我們?cè)u(píng)估該圖片的大小大概為：160000/1024 約等于 156（KB），如果大很多，說明圖片大小有優(yōu)化控件。如果小很多，說明此時(shí)是模糊的。

6.移動(dòng)端適配

列舉一下筆者所知道的適配方式：

1）媒體查詢。該方案的話，個(gè)人覺得是最佳的方案，也是常用UI庫(kù)非常喜歡的用處理方式之一。唯一不好的是：多套媒體方案，也意味多份的工作量。
2）vw/vh 利用單位vw/vh進(jìn)行布局。該方案的話，對(duì)整體的布局還是相對(duì)穩(wěn)定，但是對(duì)部分細(xì)節(jié)等處理還是不優(yōu)化。且遇到手機(jī)屏幕差異較大的話，會(huì)出現(xiàn)嚴(yán)重的視差。
3）rem 相對(duì)穩(wěn)定的方法。根據(jù)屏幕大小計(jì)算出font-size;但是只能求良好，很難求精。如果UI對(duì)一像素非常的敏感，這個(gè)方案可能是個(gè)非常糟糕的選擇。
4）類似小程序rpx。相信原生小程序開發(fā)者都用過rpx。這里其實(shí)原理有點(diǎn)類似rem。但是，卻不是按屏幕大小去計(jì)算，而是不同的屏幕定義了自己的標(biāo)準(zhǔn)。

7.常見兼容性

這個(gè)問題本次只列舉了幾個(gè)常見的，非全部列出。如需具體，可另查資料。

1）間距差異是否大，導(dǎo)致文本換行，或者間隔太大。原因：每個(gè)瀏覽器的margin和padding的默認(rèn)值不同。解決方案：全局文件設(shè)置統(tǒng)一默認(rèn)margin和padding。

2）圖片默認(rèn)有間距原因：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道。（我的一個(gè)學(xué)生使用負(fù)margin，雖然能解決，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法，所以我禁止他們使用）解決方案：使用float屬性為img布局

3）較小的高度（小于10px），時(shí)，ie可能會(huì)超出高度原因：IE有一個(gè)默認(rèn)的行高的高度解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。

為min-height本身就是一個(gè)不兼容的CSS屬性

4）透明度兼容設(shè)置原因：不同瀏覽器各自透明度關(guān)鍵字不統(tǒng)一。解決方案：filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;

5）IE的hover圖片會(huì)閃爍原因：IE6的每次觸發(fā) hover 的時(shí)候都會(huì)重新加載解決方案：提前緩存文件。document.execCommand("BackgroundImageCache", false, true);

8.垂直居中

該回復(fù)只給予思路，沒有具體寫法。因?yàn)槲矣X得大家都應(yīng)該懂。

已知寬高：1.margin 自己算高寬　 2.定位 + margin-top + margin-left 3.定位 + margin:auto

未知寬高：1.transform 但有IE兼容的問題 2.flex 布局 3.display: table-cell

9.實(shí)現(xiàn)1px

首先你可能需要了解一下物理像素跟獨(dú)立像素的區(qū)別。

物理像素：一個(gè)物理像素是顯示器（手機(jī)屏幕）上最小的物理顯示單元，如：iPhone6上就有7501334個(gè)物理像素顆粒。獨(dú)立像素：邏輯像素，程序使用的虛擬像素。如：iPhone6上就有375677個(gè)獨(dú)立像素。

那么如何實(shí)現(xiàn)1px呢：1.利用 transfrom 的 scale 縮放來實(shí)現(xiàn) 2.利用 background 的 line-gradient 線性漸變來實(shí)現(xiàn) 3.meta viewport修改成1比0.5。這樣整個(gè)屏幕的大小縮小了0.5。4.利用box-shadow

10.三列布局

該回復(fù)只給思路

1.CSS浮動(dòng) 第一個(gè)float:left，第二個(gè)float:right，第三個(gè)設(shè)置margin-left和margin-right

2.絕對(duì)定位法第一個(gè)定位到left，第二個(gè)定位到right，第三個(gè)設(shè)置margin-left和margin-right

3.flex布局

11.樣式優(yōu)化

初步聊聊個(gè)人的樣式優(yōu)化方案如下：

1.避免css層級(jí)太深。有興趣了解一下css tree如何跟html tree融合成dom tree。2.首屏（特別是緩沖效果圖）可適當(dāng)使用內(nèi)聯(lián)元素。這樣有利于更快的顯示。3.異步加載CSS。非首次重要引入的css文件，不放在head里邊。這樣會(huì)引起阻塞。4.減少回流的屬性。如display:none可以考慮使用visibility 5.適當(dāng)使用GPU渲染。如tranfrom等。6.css動(dòng)畫的性能，是遠(yuǎn)遠(yuǎn)的大于js動(dòng)畫性能。7.利用工具壓縮，去重。

12.偽類和偽元素

偽類和偽元素的根本區(qū)別在于：它們是否創(chuàng)造了新的元素

偽類，指可以通過元素選擇器，就可以實(shí)現(xiàn)的效果，如frist-child，active等。而偽元素，是指需要通過創(chuàng)元素，才可以實(shí)現(xiàn)的效果，如first-letter,before，after等。

具體元素跟寫法有興趣，可參考：blog.csdn.net/qq_27674439…

喜歡的老鐵，加個(gè)關(guān)注！今后會(huì)分享更多的前端干貨，歡迎點(diǎn)贊轉(zhuǎn)發(fā)關(guān)注[比心][比心][比心]

來源 https://juejin.im/post/6867715946941775885

在線咨詢

上一篇：一文快速讀懂CSS屬性選擇器
下一篇：使用HTML添加表格1（基本元素）-零基礎(chǔ)自學(xué)網(wǎng)頁制作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

「Web前端開發(fā)」-16-CSS浮動(dòng)

1.盒子模型

2.BFC

3.flex布局

4.css3新特性

5.圖片格式

6.移動(dòng)端適配

7.常見兼容性

8.垂直居中

9.實(shí)現(xiàn)1px

10.三列布局

11.樣式優(yōu)化

12.偽類和偽元素

您的項(xiàng)目需求