float作用就是在于布局，首先要介绍的是文档流（标准流），之后是浮动布局。
文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。
浮动布局：
1、float: left | right
2、元素浮动之后不占据原来的位置（脱标）
3、浮动的盒子在一行上显示
4、行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;
浮动作用：
1、文本饶图
2、导航制作
3、网页布局
?文本饶图：这里有个十分特殊的知识点，就是当红色的div浮动以后，虽然p元素也是块状元素，但是p标签并没有往上顶到红色的div下。这是因为float当初被开发出来就是为了解决文字环绕的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box1 {
width: 400px;
height: 500px;
background-color: yellow
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
float: left
}
</style>
</head>
<body>
<div class="box1" style="">
<div class="box2"></div>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
<p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>
</div>
</body>
</html>
效果：
?导航制作：之前制作导航都是将文字放置于一个div中，然后设置它们的a标签为行内块。现在直接设置li为浮动就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
.nav{
width: 800px;
height: 40px;
background: pink;
margin: 20px auto;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: inline-block;
height: 40px;
font: 14px/40px 微软雅黑;
padding:0 20px;
text-decoration: none;
}
.nav ul li a:hover{
background: #aaa;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度一下</a></li>
<li><a href="#">14期威武</a></li>
</ul>
</div>
</body>
</html>
效果：
时间： 2024-08-29 22:40:49