2023年6月20日发(作者：)

HTML5中块级元素float浮动总结 属性在CSS中，任何元素都可以浮动，⽆论是块级元素还是⾏内元素，设置浮动后可以设置宽⾼（width,height）。值leftright元素向左浮动。元素向右浮动。描述none默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。inherit规定应该从⽗元素继承 float 属性的值。 HTML5中的块级元素默认要独占⼀⾏，⽆论当前块元素的宽度是多少。2.简单⽰例 float⽤法

block1
block2

block3

效果图

（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 属性规定元素的哪⼀侧不允许其他浮动元素。值leftrightboth描述在左侧不允许浮动元素。在右侧不允许浮动元素。在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从⽗元素继承 clear 属性的值。

（1）设置了 clear 的元素只能通过调整⾃⾝来使⾃⼰不要和浮动元素排列在⼀起。（2）⽐如说，如果⼀个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整⾃⼰，排到下⼀⾏去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下⼀⾏，同时往左浮动。（3）如果设置了clear: right，也⽆法清除右边的元素。因为元素只能调整⾃⾝，不能移动别的元素。所以右边即使有浮动元素，也⽆法清除。官⽅的解释是：「元素盒⼦的边不能和前⾯的浮动元素相邻」。我理解这句话其实就是调到前⾯元素的下⼀⾏，让左右两边不与前⾯的元素相邻。

2.4清除浮动的4种⽅法（1）设置block3块的clear属性 #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。 float⽤法

block1
block2

block3
效果图：

样式名为clearfix的块写在了container块⾥⾯，当清除浮动时，⽗元素container的⾼度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在⽂档流内，所以⽗元素只能⾃动增加⾼度，其背景颜⾊就显⽰出来了。如果将clearfix的块写在了container块外⾯，则⽗元素container的⾼度不能被撑起来，如下图所⽰：（3）为⽗元素添加overflow属性overflow属性值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。inherit规定应该从⽗元素继承 overflow 属性的值。 #container { border: 1px solid rgb(163, 163, 163); background-color: #ddd; width: 800px; /* ⽗元素加上overflow属性 */ overflow: auto; }效果如下图，此时已经默认清除了浮动。

（4）使⽤ after 伪元素清除浮动（推荐使⽤） float⽤法

block1
block2
block3
View Code起作⽤的代码如下： .clearfix:after{/*伪元素是⾏内元素 正常浏览器清除浮动⽅法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的⽅式 *号只有IE6-IE7执⾏，其他浏览器不执⾏*/ }效果图：（5）使⽤before和after双伪元素清除浮动（推荐使⽤） .clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }效果与上⾯相同。（6）给浮动元素⽗级设置⾼度 （7）设置⽗元素同时浮动（8）⽗元素设置成inline-block（9）br 标签清除浮动参考⽂章：

2023年6月20日发(作者：)

HTML5中块级元素float浮动总结 属性在CSS中，任何元素都可以浮动，⽆论是块级元素还是⾏内元素，设置浮动后可以设置宽⾼（width,height）。值leftright元素向左浮动。元素向右浮动。描述none默认值。元素不浮动，并会显⽰在其在⽂本中出现的位置。inherit规定应该从⽗元素继承 float 属性的值。 HTML5中的块级元素默认要独占⼀⾏，⽆论当前块元素的宽度是多少。2.简单⽰例 float⽤法

block1
block2

block3

效果图

（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 属性规定元素的哪⼀侧不允许其他浮动元素。值leftrightboth描述在左侧不允许浮动元素。在右侧不允许浮动元素。在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从⽗元素继承 clear 属性的值。

（1）设置了 clear 的元素只能通过调整⾃⾝来使⾃⼰不要和浮动元素排列在⼀起。（2）⽐如说，如果⼀个元素同时设置了 float:left 和 clear:left，希望左边不要有浮动元素，那么这个元素就要调整⾃⼰，排到下⼀⾏去。因为设置了 float: left，这个元素会往左边靠拢，所以这个元素会跑到下⼀⾏，同时往左浮动。（3）如果设置了clear: right，也⽆法清除右边的元素。因为元素只能调整⾃⾝，不能移动别的元素。所以右边即使有浮动元素，也⽆法清除。官⽅的解释是：「元素盒⼦的边不能和前⾯的浮动元素相邻」。我理解这句话其实就是调到前⾯元素的下⼀⾏，让左右两边不与前⾯的元素相邻。

2.4清除浮动的4种⽅法（1）设置block3块的clear属性 #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。 float⽤法

block1
block2

block3
效果图：

样式名为clearfix的块写在了container块⾥⾯，当清除浮动时，⽗元素container的⾼度被撑起来了，其兄弟元素block3的渲染也不再受到浮动的影响。因为此时clearfix块还在⽂档流内，所以⽗元素只能⾃动增加⾼度，其背景颜⾊就显⽰出来了。如果将clearfix的块写在了container块外⾯，则⽗元素container的⾼度不能被撑起来，如下图所⽰：（3）为⽗元素添加overflow属性overflow属性值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显⽰滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显⽰滚动条以便查看其余的内容。inherit规定应该从⽗元素继承 overflow 属性的值。 #container { border: 1px solid rgb(163, 163, 163); background-color: #ddd; width: 800px; /* ⽗元素加上overflow属性 */ overflow: auto; }效果如下图，此时已经默认清除了浮动。

（4）使⽤ after 伪元素清除浮动（推荐使⽤） float⽤法

block1
block2
block3
View Code起作⽤的代码如下： .clearfix:after{/*伪元素是⾏内元素 正常浏览器清除浮动⽅法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden; } .clearfix{ *zoom: 1;/*ie6清除浮动的⽅式 *号只有IE6-IE7执⾏，其他浏览器不执⾏*/ }效果图：（5）使⽤before和after双伪元素清除浮动（推荐使⽤） .clearfix:after, .clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }效果与上⾯相同。（6）给浮动元素⽗级设置⾼度 （7）设置⽗元素同时浮动（8）⽗元素设置成inline-block（9）br 标签清除浮动参考⽂章：