本文摘自PHP中文网,作者php中世界最好的语言,侵删。
这次给大家带来网页的布局方式之清除浮动, 清除浮动的注意事项有哪些,下面就是实战案例,一起来看一下。盒子的高度问题
1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;
为什么要清楚浮动?
相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;
清除浮动方式一:
解决方案:
给前面一个父元素设置高度
注意点:
在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少;
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
body:
1 2 3 4 5 6 7 8 |
|
清除浮动方式二:
解决方案:
给后面的盒子添加clear:both;属性
clear属性取值:
none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效;所以不推荐使用
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
清除浮动方式三:
解决方案:
外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear: both;属性;
注意点:
外墙法它可以让第二个盒子使用margin-top属性,
外墙法不可以让第一个盒子使用margin-bottom属性,
不过可以通过设置额外标签的高度来实现margin效果;
搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
清除浮动方式四:
解决方案:
内墙法:
1在第一个盒子中所有子元素最后添加一个额外的块级元素,
2给这个额外添加的块级元素设置clear: both;属性
注意点:
内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性
1 |
|
外墙法和内墙法区别?
外墙法不能撑起第一个盒子的高度, 而内墙法可以撑起第一个盒子的高度
在企业开发中<a>不常用隔墙法</a>来清除浮动 (隔墙法:外墙法和内墙法)
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
CSS的背景与精灵图
CSS的显示模式如何使用
以上就是 网页的布局方式之清除浮动的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
怎样使用trigger方式实现不用点击file类型的input弹出文件选择对话框
更多相关阅读请进入《浮动》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者