「Web前端開發」-16-CSS浮動

節課介紹CSS的浮動。

動是css里面布局用的最多的屬性。

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

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

浮動的性質：脫標、貼邊、字圍、收縮。

浮動的元素脫標

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

兩個元素并排了, 并且兩個元素都能夠設置寬度、高度了。

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

一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。

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

浮動的元素互相貼靠

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

浮動的元素有"字圍"效果

<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中的文字不會被擋住, 形成"字圍"效果。如果將p標記換成div, 則不會有"字圍"效果。

詳細案例見：CSS|實例|圖文混排

收縮：一個浮動的元素, 如果沒有設置width, 那么將自動收縮為文字的寬度(這點非常像行內元素)。

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

浮動的清除

實驗：現在有兩個div, div身上沒有任何屬性。每個div中都有li, 這些li都是浮動的。

<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>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

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

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

原因就是因為div沒有高度, 不能給自己浮動的孩子們, 一個容器。

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

如果一個元素要浮動, 那么它的祖先元素一定要有高度。高度的盒子, 才能關住浮動。

解決方法:

<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; /* 為父元素設置高度 */
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>設計模式</li>
</ul>
</div>
<div>
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法2：clear:both;

網頁制作中, 高度height很少出現。為什么? 因為能被內容撐高! 那也就是說, 剛才我們講解的方法1, 工作中用的很少。

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

clear:both;

clear就是清除, both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。

這種方法有一個非常大的、致命的問題, 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>設計模式</li>
</ul>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

清除浮動方法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>設計模式</li>
</ul>
</div>

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

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

這個墻, 隔開了兩部分浮動, 兩部分浮動, 互不影響。

近些年, 有演化出了"內墻法"：

<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>設計模式</li>
</ul>
<div class="cl h16"></div>
</div>
<div class="box2">
<ul>
<li>學習方法</li>
<li>英語水平</li>
<li>面試技巧</li>
</ul>
</div>
</body>
</html>

內墻法本質-給沒有高的父親撐出高

因為一個父元素不可能被浮動的子元素撐出高度, 解決的方法：內墻法

<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{ /* 如果沒有清除浮動 , 則父元素的盒子沒有高度, <div>盒子只是一條線*/
clear: both;
}
</style>
</head>
<body>
<div>
<p></p>
<div class="cl"></div>
</div>
</body>
</html>

清除浮動方法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>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</body>
</html>

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

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

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>

浮動清除方法5: 利用偽元素清除浮動

ss章節，本文僅列出筆者任務相對重要的知識點，且介紹上，針對重點。當然，遺漏很正常，希望能收到你的意見。

1.盒子模型

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

我們日常可能會遇到不同的瀏覽器，元素的高寬不一致。除了可能是瀏覽器內置的margin跟padding不同之外，也可能是IE跟w3c的盒子模型組成不同。

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

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

2.BFC

簡單的個人理解，block formatting context，塊級格式化上下文。產生了BFC的，形成了獨立容器，他的特性就是不會在布局中影響到外邊的元素。

他的特性：

1)BFC邊距會重疊。
2)BFC的內外元素互相不影響
3)BFC不會與浮動元素發生重疊
4)BFC元素的高度計算會包括元素內的浮動元素的高度

觸發的條件是：

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

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

GFC：可簡單理解為grid布局
FFC：可簡單理解為flex布局。
IFC:內聯格式化上下文，簡單理解為：inline-block。

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

3.flex布局

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

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

特別注意：flex:0 0 30%的意義：等于flex-grow=0（默認不放大）+flex-shrink=0（不縮小）+flex-basis=30%（項目占據主軸的空間）

4.css3新特性

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

5.圖片格式

前端的圖片分類格式,其實是性能優化的很大部分。選擇好圖片的類型，對前端的性能影響非常大。

而前端對圖片的精髓，一方面是對圖片大小的評估，一方面是對圖片的類型選擇。

他的大小可以這樣判斷：

比如一張200*200的圖片大小，這時候，他的像素點有40000個。每個像素有 4 個通道，所以一共有160000個字節,所以，我們評估該圖片的大小大概為：160000/1024 約等于 156（KB），如果大很多，說明圖片大小有優化控件。如果小很多，說明此時是模糊的。

6.移動端適配

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

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

7.常見兼容性

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

1）間距差異是否大，導致文本換行，或者間隔太大。原因：每個瀏覽器的margin和padding的默認值不同。解決方案：全局文件設置統一默認margin和padding。

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

3）較小的高度（小于10px），時，ie可能會超出高度原因：IE有一個默認的行高的高度解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。

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

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

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

8.垂直居中

該回復只給予思路，沒有具體寫法。因為我覺得大家都應該懂。

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

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

9.實現1px

首先你可能需要了解一下物理像素跟獨立像素的區別。

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

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

10.三列布局

該回復只給思路

1.CSS浮動第一個float:left，第二個float:right，第三個設置margin-left和margin-right

2.絕對定位法第一個定位到left，第二個定位到right，第三個設置margin-left和margin-right

3.flex布局

11.樣式優化

初步聊聊個人的樣式優化方案如下：

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

12.偽類和偽元素

偽類和偽元素的根本區別在于：它們是否創造了新的元素

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

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

喜歡的老鐵，加個關注！今后會分享更多的前端干貨，歡迎點贊轉發關注[比心][比心][比心]

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「Web前端開發」-16-CSS浮動

1.盒子模型

2.BFC

3.flex布局

4.css3新特性

5.圖片格式

6.移動端適配

7.常見兼容性

8.垂直居中

9.實現1px

10.三列布局

11.樣式優化

12.偽類和偽元素

您的項目需求