HTML5中块级元素float浮动总结
1.float属性
在CSS中，任何元素都可以浮动，⽆论是块级元素还是⾏内元素，设置浮动后可以设置宽⾼（width,height）。
值描述
left元素向左浮动。
right元素向右浮动。
none默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。
inherit规定应该从⽗元素继承 float 属性的值。
HTML5中的块级元素默认要独占⼀⾏，⽆论当前块元素的宽度是多少。
2.简单⽰例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float⽤法</title>
<style>
#container {
border: 1px solid rgb(163, 163, 163);
background-color: #ddd;
width: 800px;
}
#block1 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(233, 142, 142);
width: 200px;
height: 150px;
}
#block2 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(145, 233, 142);
width: 300px;
height: 180px;
}
#block3 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(241, 94, 241);
width: 260px;
height: 120px;
}
</style>
</head>
<body>
<div id="container">
<div id="block1">block1</div>
<div id="block2">block2</div>
</div>
<div id="block3">block3</div>
</body>
</html>
效果图
（1）container块没有设置⾼度
（2）block1块和block2放置于container块中，block3块置于container块之外。
2.1设置第⼀个块block1浮动
#block1
{
border:1px solid rgb(163, 163, 163);
background-color: rgb(233, 142, 142);
width: 200px;
height: 150px;
/* 浮动到左边 */
float: left;
}
效果图：
block1块脱离⽂档流浮动到⽗容器container的左上⾓，block2块和block3块默认向上移动到原来block1位置，显⽰出来的效果就是block1盖住了block2。⼤概是下图这个意思吧。
2.2设置block1浮动到左边，block2浮动到右边
#block1 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(233, 142, 142);
width: 200px;
height: 150px;
/* 浮动到左边 */
float: left;
}
#block2 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(145, 233, 142);
width: 300px;
height: 180px;
/* 浮动到右边 */
float: right;
}
效果图
block1块和block2块都浮动起来了，两个块的⾼度都⽐block3⾼，所以block3顶到⽂档的最上⾯，被block1块和block2块盖住。
2.3清除浮动(clear)
clear 属性规定元素的哪⼀侧不允许其他浮动元素。
值描述
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从⽗元素继承 clear 属性的值。
（1）设置了 clear 的元素只能通过调整⾃⾝来使⾃⼰不要和浮动元素排列在⼀起。
（2）⽐如说，如果⼀个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整⾃⼰，排到下⼀⾏去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下⼀⾏，同时往左浮动。
（3）如果设置了clear: right，也⽆法清除右边的元素。因为元素只能调整⾃⾝，不能移动别的元素。所以右边即使有浮动元素，也⽆法清
除。
<官⽅的解释是：「元素盒⼦的边不能和前⾯的浮动元素相邻」。我理解这句话其实就是调到前⾯元素的下⼀⾏，让左右两边不与前⾯的元素相邻。
2.4清除浮动的4种⽅法
（1）设置block3块的clear属性
html里的float是什么意思#block3 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(241, 94, 241);
width: 260px;
height: 120px;
/* 清除左边浮动 */
clear:left;
}
效果图：
#block3 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(241, 94, 241);
width: 260px;
height: 120px;
/* 清除右边浮动 */
clear:right;
}
效果图：
（2）在block2块后⾯添加⼀个空div，这个空 div 的样式添加 clear：both。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float⽤法</title>
<style>
#container {
border: 1px solid rgb(163, 163, 163);
background-color: #ddd;
width: 800px;
}
#block1 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(233, 142, 142);
width: 200px;
height: 150px;
/* 浮动到左边 */
float: left;
}
#block2 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(145, 233, 142);
width: 300px;
height: 180px;
/* 浮动到右边 */
float: right;
}
#block3 {
border: 1px solid rgb(163, 163, 163);
background-color: rgb(241, 94, 241);
width: 260px;
height: 120px;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="block1">block1</div>
<div id="block2">block2</div>
<div class="clearfix"></div>
</div>
<div id="block3">block3</div>
</body>
</html>
效果图：
样式名为clearfix的块写在了container块⾥⾯，当清除浮动时，⽗元素container的⾼度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在⽂档流内，所以⽗元素只能⾃动增加⾼度，其背景颜⾊就显⽰出来了。
如果将clearfix的块写在了container块外⾯，则⽗元素container的⾼度不能被撑起来，如下图所⽰：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。