浮動是網頁佈局中非常重要的一個屬性。那麼
浮動這個屬性一開始設計的初衷是爲了網頁的文字環繞效果。文字環繞現象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向外邊距</title>
<style type="text/css">
html{
font-size:24px;
}
img{
width:20rem;
}
#sep{
float: left;
}
p{
border:1px solid red;
text-indent:2rem;
font-size:1rem;
}
</style>
</head>
<body>
<div id="sep">
<img src="https://i1.mifile.cn/a4/xmad_15590487108559_JOpcA.jpg" alt="加載失敗" title="王源">
</div>
<p>
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我去我
</p>
</body>
</html>
1.浮動屬性
-
css樣式表中用float來表示，它有
![]()
<meta charset="UTF-8"/>
<title>浮動屬性用法</title>
<style type="text/css">
.left{
width: 200px;
height: 200px;
background-color: red;
color: #fff;
/*左浮動*/
float:left;
}
.right{
width: 200px;
height: 200px;
background-color: green;
color: #fff;
/*右浮動*/
float:right;
}
</style>
<div class="left">左邊的盒子</div>
<div class="right">右邊的盒子</div>
2.浮動現象
我們之前說浮動的設計初衷是爲了做”文字環繞效果“。那麼我們就來看一下如果對盒子設置了浮動，會產生什麼現象？
1浮動的元素脫離了標準文檔流，即脫標
2浮動的元素互相貼靠
3浮動的元素會產生”字圍“效果
4浮動元素有收縮效果
3.浮動的破壞性
-
浮動之後效果展示：
![]()
由此可見，浮動之後，盒子因爲脫離了標準文檔流，它撐不起父盒子的高度，導致父盒子
高度塌陷。如果網頁中出現了這種問題，會導致我們整個網頁的佈局紊亂。我們一定要去解決這種父盒子高度塌陷的問題。那麼如何解決浮動給網頁帶來的問題？點擊領取免費資料及課程
4.清除浮動的方式
我們知道浮動具有破壞性，它能使父盒子高度塌陷、導致頁面紊亂。那麼在css佈局中對於浮動的解決方案有四種：
1.父盒子設置固定高度
- 給父盒子設置固定高度，缺點不靈活，後期不易維護。應用領域導航欄。
2.內牆法
- 在浮動元素的後面加一個空的塊級元素(通常是div),並且該元素設置clear:both屬性。
- clear屬性，字面意思就是清除，那麼both,就是清除浮動元素對我左右兩邊的影響。如下示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 800px;
margin: 100px auto;
border: 1px solid #000;
}
.child1{
width: 200px;
height: 400px;
background-color: red;
float: left;
}
.child2{
width: 300px;
height: 200px;
background-color: green;
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<!--內牆法：給最後一個浮動元素的
後面添加一個空的塊級標籤，並且設
置該標籤的屬性爲clear:both;-->
<div class="father">
<div class="child1">A盒子</div>
<div class="child2">B盒子</div>
<div class="clear"></div>
</div>
- 存在問題：冗餘過長。
3.僞元素清除法（推薦使用）
僞元素選擇器很簡單。就像僞類一樣，讓僞元素添加了選擇器，但不是描述特殊的狀態，他們允許您爲元素的某些部分設置樣式。在這裏只介紹一個。
點擊領取免費資料及課程-
語法：
p::after{ /*p::after{}一定要有content。表示在p元素內部的最後面的添加內容*/ content:'...' } -
示例：
... .clearfix::after{ content:''; display: block; clear: both; /*visibility: hidden;*/ /*height: 0;*/ } </style> </head> <body> <div class="father clearfix"> <div class="child1">盒子A</div> <div class="child2">盒子B</div> </div>
4.overflow:hidden
-
CSS屬性overflow定義一個元素的內容太大而無法適應盒子的時候該做什麼。它是overflow-x和overflow-y的簡寫屬性
![]()
hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
overflow: hidden;
}
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
此處有一篇1萬字文章
</div>
</body>
</html>
#注意：此處內容會被修建，並且其餘內容不可見
overflow:hidden||auto|scroll屬性之後，它會形成一個BFC區域，我們叫做它爲塊級格式化上下文。BFC只是一個規則。它對浮動定位都很重要。浮動定位和清除浮動只會應用於同一個BFC的元素。
浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 800px;
margin: 100px auto;
border: 1px solid #000;
/*一旦設置一個Box盒子 除了overflow：visible；
它會形成一個BFC,BFC它有佈局規則： 它會讓內部浮動元素計算高度*/
overflow: hidden;
}
.child1{
width: 200px;
height: 400px;
background-color: red;
float: left;
}
.child2{
width: 300px;
height: 200px;
background-color: green;
/*float: right;*/
/*overflow: hidden;*/
float: left;
}
</style>
</head>
<body>
<div class="father ">
<div class="child1">A盒子</div>
<div class="child2">B盒子</div>
</div>
</body>
</html>
5.深入理解BFC：
- 瞭解BFC
點擊領取免費資料及課程
（1）B: BOX即盒子，頁面的基本構成元素。分爲 inline 、 block 和 inline-block三種類型的BOX
（2）FC: Formatting Context是W3C的規範中的一種概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
（3）常見的 Formatting Context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)
- 1.BFC佈局：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float 元素重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
- 2.哪那些元素會生成BFC
1.根元素
2.float屬性不爲none
3.position爲absolute或fixed
4.display爲inline-block
5.overflow不爲visible
- 3.display屬性
display屬性設置元素如何顯示
