CSS-8.3-浮動與清除
文檔流
文檔流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置
浮動與清除
1.float：浮動
2.clear:清除
3.子盒子浮動造成父盒子高度塌陷
一：float：浮動
- float屬性使元素脫離了常規文檔流而表現爲向右或向左浮動
- 由於浮動的元素不在文檔流中，所以在文檔流中浮動的元素就像不存在一樣，其周圍的元素也會重新排列
- 浮動是爲了打破常規的文檔流模型，在頁面佈局中降低侷限性
- float屬性值
- left：元素向左浮動
- right：元素向右浮動
- none：默認，元素不浮動
浮動的特徵
1.浮動會讓元素脫離文檔流，後面不浮動的元素會佔據原來的位置
2.停止浮動：
a.碰到父級元素的邊界會停止
b.碰到前面有浮動的元素（緊跟在浮動元素之後排列）
c.碰到沒有浮動的元素
3.浮動會把元素轉換成行內塊元素（讓元素並在一行）
4.當父元素沒有設置固定高度和子元素都浮動時，父級元素的高度就無法被撐開（給父級元素添加overflow:hidden清除浮動）
5.當父級元素不夠時，浮動元素會換行顯示
6.浮動只能打破文檔流，不能打破字節流
<!-- 特徵一
1.浮動會讓元素脫離文檔流，後面不浮動的元素會佔據原來的位置-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動的特徵一</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
/* 給div1添加右浮動 */
.div1{
background-color: #ff0;
float: right;
}
/* 沒有添加浮動 */
.div2{
background-color: #0ff;
}
</style>
</head>
<body>
<div class="div1">向右浮動</div>
<div class="div2">沒有浮動</div>
</body>
</html>
效果圖
<!-- 停止浮動
a.碰到父級元素的邊界會停止
b.碰到前面有浮動的元素（緊跟在浮動元素之後排列）
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>停止浮動</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
/* 碰到父級元素的邊界會停止 */
.div1{
background-color: #ff0;
float: right;
}
.div2{
background-color: #0ff;
float: left;
}
/* 碰到前面有浮動的元素（緊跟在浮動元素之後排列）*/
.div3{
background-color: #f00;
float: left;
}
</style>
</head>
<body>
<div class="div1">向右浮動</div>
<div class="div2">向左浮動</div>
<div class="div3">向左浮動</div>
</body>
</html>
效果圖
<!-- 停止浮動
c.碰到沒有浮動的元素-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>停止浮動</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/* 不設置浮動 */
.div1{
background-color: #ff0;
}
/* 設置向左浮動 */
.div2{
background-color: #0ff;
float: left;
}
</style>
</head>
<body>
<div class="div1">不浮動</div>
<div class="div2">向左浮動</div>
</body>
</html>
效果圖
<!-- 特徵三
3.浮動會把元素轉換成行內塊元素（讓元素並在一行）-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特徵三</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/* 設置向左浮動 */
.div1{
background-color: #ff0;
float: left;
}
/* 設置向左浮動 */
.div2{
background-color: #0ff;
float: left;
}
</style>
</head>
<body>
<div class="div1">向左浮動</div>
<div class="div2">向左浮動</div>
</body>
</html>
效果圖
<!-- 特徵四
4.當父元素沒有設置固定高度和子元素都浮動時，父級元素的高度就無法被撐開-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特徵四</title>
<style type="text/css">
.wrap{
border: 5px solid red;
}
/* 設置向左浮動 */
div{
line-height: 100px;
text-align: center;
}
.div1{
width: 100px;
height: 100px;
background-color: #ff0;
float: left;
}
/* 設置向左浮動 */
.div2{
width: 100px;
height: 100px;
background-color: #0ff;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">向左浮動</div>
<div class="div2">向左浮動</div>
</div>
</body>
</html>
效果圖
<!-- 特徵五
5.當父級元素不夠時，浮動元素會換行顯示-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特徵五</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
/* 設置向左浮動 */
.div1{
background-color: #ff0;
float: left;
}
/* 設置向左浮動 */
.div2{
background-color: #0ff;
float: left;
}
/* 設置向左浮動 */
.div3{
background-color: #369;
float: left;
}
/* 設置向左浮動 */
.div4{
background-color: #903;
float: left;
}
</style>
</head>
<body>
<div class="div1">向左浮動</div>
<div class="div2">向左浮動</div>
<div class="div3">向左浮動</div>
<div class="div4">向左浮動</div>
</body>
</html>
效果動態圖
<!-- 特徵六
6.浮動只能打破文檔流，不能打破字節流
文字環繞
給div2添加clear:both即可清除浮動-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特徵六</title>
<style type="text/css">
/* 向左浮動 */
.div1{
width: 100px;
height: 100px;
border: 2px solid red;
float: left;
}
/* 不浮動 */
.div2{
width: 50px;
height: 50px;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="div1">向左浮動</div>
<div class="div2">不浮動</div>
</body>
</html>
效果圖
二：clear：清除
- 屬性值
- left：清除左浮動影響
- right：清除右浮動影響
- both：同時清除左右浮動影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
/* 向左浮動 */
.div1{
width: 100px;
height: 100px;
border: 1px solid #f00;
float: left;
}
.div2{
width: 50px;
height: 50px;
background-color: #0ff;
/* 清除浮動 */
clear: both;
}
</style>
</head>
<body>
<div class="div1">向左浮動</div>
<div class="div2">不浮動</div>
</body>
</html>
效果圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.div1{
background-color: #ff0;
float: left;
}
.div2{
background-color: #0ff;
float: left;
}
.div3{
background-color: #369;
float: left;
/* 清除浮動之後換行顯示 */
clear: both;
}
.div4{
background-color: #903;
float: left;
}
</style>
</head>
<body>
<div class="div1">向左浮動1</div>
<div class="div2">向左浮動2</div>
<div class="div3">向左浮動3</div>
<div class="div4">向左浮動4</div>
</body>
</html>
效果圖
三：子盒子浮動造成父盒子高度塌陷
- 當子盒子全部浮動，如果父盒子沒有指定高度，則父盒子高度將會塌陷爲0
解決父級元素高度無法撐開問題（是給浮動元素的父級添加）
1.在父元素中添加一個新的元素，爲新元素設置clear:both
2.爲父元素添加overflow:hidden屬性
3.爲父元素添加僞類：after,對僞類設置clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.wrap{
border: 2px solid #f00;
}
/* 爲父元素新的元素添加clear:both */
.clear{
clear:both;
}
.div1{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: #0ff;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<!-- 在父級元素中添加新元素，設置clear:both -->
<div class="clear"></div>
</div>
</body>
</html>
效果圖
2、爲父元素添加overflow:hidden屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.wrap{
border: 2px solid #f00;
/* 爲父元素添加overflow:hidden屬性,清除浮動 */
overflow: hidden;
}
.div1{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: #0ff;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
</body>
</html>
效果圖
3、爲父元素添加僞類：after,對僞類設置clear:both
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
.wrap{
border: 2px solid #f00;
}
/* 爲父元素添加僞類after,清除浮動 */
.wrap:after{
clear: both;
content: " ";
display: block;
}
.div1{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
.div2{
width: 100px;
height: 100px;
background-color: #0ff;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>
</body>
</html>
效果圖
