float中的四個參數
- 左浮動 float:left;
- 右浮動 float:right;
- 不浮動 float:none;
- 繼承 float:inherit;
float屬性實現文本環繞
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
*{
padding: 0;
margin: 0;
}
img{
float: right;
}
</style>
</head>
<body>
<img src="logo.png" alt="">
慕課網是垂直的互聯網IT技能免費學習網站。以獨家視頻教程、在線編程工具、學習計劃、問答社區爲核心特色。在這裏，你可以找到最好的互聯網技術牛人，也可以通過免費的在線公開視頻課程學習國內領先的互聯網IT技術。
慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言，包括基礎課程、實用案例、高級分享三大類型，適合不同階段的學習人羣。以純乾貨、短視頻的形式爲平臺特點，爲在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。
慕課網是垂直的互聯網IT技能免費學習網站。以獨家視頻教程、在線編程工具、學習計劃、問答社區爲核心特色。在這裏，你可以找到最好的互聯網技術牛人，也可以通過免費的在線公開視頻課程學習國內領先的互聯網IT技術。
慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言，包括基礎課程、實用案例、高級分享三大類型，適合不同階段的學習人羣。以純乾貨、短視頻的形式爲平臺特點，爲在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。
慕課網是垂直的互聯網IT技能免費學習網站。以獨家視頻教程、在線編程工具、學習計劃、問答社區爲核心特色。在這裏，你可以找到最好的互聯網技術牛人，也可以通過免費的在線公開視頻課程學習國內領先的互聯網IT技術。
慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言，包括基礎課程、實用案例、高級分享三大類型，適合不同階段的學習人羣。以純乾貨、短視頻的形式爲平臺特點，爲在校學生、職場白領提供了一個迅速提升技能、共同分享進步的學習平臺。
</body>
</html>
![]()
float浮動的真正原因以及副作用
- 使元素脫離了標準流
- 浮動的元素不佔有原空間
- 父元素塌陷及其他元素異位
CSS的定位機制
- 標準流（普通流）
- 定位
- 浮動
浮動副作用的解決
- 手動給元素添加高度
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: 32px;
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>
![]()
- 通過clear清除內部和外部浮動
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: auto;
border: 1px solid #000;
}
.test{
width: 100px;
height: 30px;
float: left;
background: red;
border: 1px solid #FFF;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="clear"></div>
</div>
</body>
</html>
![]()
- 給父元素添加overflow屬性並結合zoom:1使用
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: auto;
border: 1px solid #000;
overflow: hidden;
zoom:1;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
</body>
</html>
![]()
- 給父元素添加浮動
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.per{
width: 500px;
height: auto;
border: 1px solid #000;
float: left;
}
.test{
width: 100px;
height: 30px;
background: red;
border: 1px solid #FFF;
float: left;
}
.bro{
width: 100px;
height: 100px;
background: blue;
clear: both;
}
</style>
</head>
<body>
<div class="per">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>
<div class="bro"></div>
</body>
</html>
![]()
