零基礎學習HTML之CSS篇元素顯示模式文檔流元素浮動和布局

素顯示模式

display : block | none | inline | inline-block

display 屬性用來設置元素的顯示方式。

block塊對象指的是元素顯示為一個方塊，默認顯示狀態下，它將占

據整行，其它的元素只能在下一行顯示。

inline行間對象與block剛好相反，它允許其它元素在同一行顯示。

none隱藏對象

元素的浮動

float : none | left | right

float 屬性用來控制元素是否浮動顯示。

left向左浮動

right向右浮動

none不浮動

浮動的時候元素的顯示屬性也變化了變為 "行內元素"

Css 布局

div 標簽：

div 與其它標簽一樣，也是一個XHTML所支持的標簽。

div 是XHTML中指定的，專門用于布局設計的容器標簽。

在css布局方式中，div 是這種布局方式的核心對象，我們的頁面排版不再依賴于表格，僅從div的使用上說，做一個簡單的布局只需要兩樣東西：div 與 css.因此我們稱這種布局方式為 div + css 布局。

</div>

盒模型就是指CSS布局中的每一個元素，在瀏覽器的解釋中，都被當作一個盒狀物。

對我們來說，只需要理解元素在頁面中所占據的位置。

ie6 / ie7 / firefox 的最終寬度 =左邊框寬 + 左內邊距 + 寬度 + 右內邊距 + 右邊框寬

文檔流

文檔流是瀏覽器解析網頁的一個重要概念，對于一個XHTML網頁，body 元素下的任意元素，根

據其前后順序，組成了一個個上下關系，這便是文檔流。瀏覽器根據這些元素的順序去顯示它

們在網頁中的位置。

文檔流是瀏覽器的默認顯示規則。

深入浮動

浮動的目的

就是要打破文檔流的默認顯示規則。如果要讓元素按照我們的布局要求進行顯示。這時就要利

用float屬性。

1.任何申明為 float 的元素自動被設置為一個"塊級元素"。

2.在標準瀏覽器中浮動元素脫離了文檔流，所以浮動元素后的元素會占據浮動元素本來應該

所處的位置。

3.如果水平方向上沒有足夠的空間容納浮動元素，則轉向下一行。

4.文字內容會圍繞在浮動元素周圍。

5.浮動元素只能浮動至左側或者右側。

清除浮動

clear : none | left | right | both

none :默認值。允許兩邊都可以有浮動對象

left :不允許左邊有浮動對象

right: 不允許右邊有浮動對象

both :不允許有浮動對象

什么要清除浮動？

一開始css的浮動，其本質是用來做一些文字混排效果的，但是后來被我們拿來做布局用，就出現了很多問題。

清除浮動的本質： 為解決父級元素因為子級浮動引起高度為0的問題

我們很多時候不方便給父盒子的高度，因為我們不清除有多少子盒子，有多少內容。經常的做法會讓內容撐開父盒子的高度。但是如果父盒子中有子盒子浮動了之后，就會影響到后面的盒子，因為浮動元素脫離了標準流。會把后面還在標準流的盒子覆蓋，解決這個問題的方法就要清除浮動

原理圖

如何清除浮動？

清除浮動其實叫做 閉合浮動 更合適，因為是把浮動的元素圈起來，讓父元素閉合出口和入口不讓他們出來影響其他的元素。在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器 { clear : 屬性值 ; }
/*屬性值為left,清除左側浮動的影響
  屬性值為right,清除右側浮動的影響
  屬性值為both,同時清除左右兩側浮動的影響*/
復制代碼

1. 額外標簽法

1.1 末尾標簽法

通過在浮動元素的末尾添加一個空的標簽。這是W3C推薦的做法，雖然比較簡單，但是添加了無意義的標簽，結構化比較差，所以不推薦使用。下面三種寫法都適用：

<!--寫法一：直接用style-->
<div style="clear:both"></div>

<!--寫法二：使用clear類-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--寫法三：可以使用br等別的塊級元素來清除浮動-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 內部標簽法

把div放進父盒子里，這樣盒子會撐開，一般也不會用。

2. overflow

給父級元素添加overflow樣式方法。

這種方法代碼比較簡潔，可以通過觸發BFC方式，但是因為本身overflow的本質是 溢出隱藏 的效果，所以有的時候也會有一些問題存在，比如內容增多的時候不會自動換行導致內容被隱藏掉，無法顯示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上這句話，就可以清除浮動   overflow = hidden|auto|scroll 都可以實現*/
  }
復制代碼

3. 偽元素法（最常用）

3.1 使用after偽元素清除浮動

after是在父元素中加一個盒子，這個元素是通過css添加上去的，符合閉合浮動思想，結構語義化正確。父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別，要進行兼容，使用zoom:1觸發hasLayout來清除浮動

代表網站：百度、淘寶、網易等

.clearfix:after{
    content:".";  /*盡量不要為空，一般寫一個點*/
    height:0;     /*盒子高度為0，看不見*/
    display:block;    /*插入偽元素是行內元素，要轉化為塊級元素*/
    visibility:hidden;      /*content有內容，將元素隱藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7識別 */
}
復制代碼

3.2 after偽元素空余字符法

父元素中加一個類名為clearfix，也需要兼容IE6-IE7

在Unicode字符里有一個“零寬度空格”，即U+200B，代替“.”，可以減少代碼量，不再使用visibility:hidden
代表網站：阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
復制代碼

3.3 使用before和after雙偽元素清除浮動（推薦）

這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7

代表網站：小米、騰訊

 .clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
復制代碼

三種方法總結

?copyright burning.

最后在這里說一下，目前在職web前端開發，如果你現在在學習web前端，在整個前端入門的學習過程當中，有遇見任何關于學習方法，學習路線，學習效率等方面的問題，或者缺乏基礎入門的視頻教程，前端面試題，學習手冊，開發工具，PDF文檔書籍教程，都可以隨時關注并私信我：前端，系統自動堅持會發送交流圈子，可以來自行獲取下載。

作者：頑皮的雪狐七七
鏈接：https://juejin.cn/post/6901903789197197325
來源：掘金

動是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: 利用偽元素清除浮動

在線咨詢

您的項目需求

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

整合營銷服務商