html网页的布局方式之如何清除浮动
这篇文章主要介绍html网页的布局方式之如何清除浮动，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联建站长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为天坛街道企业提供专业的成都做网站、网站设计，天坛街道网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
盒子的高度问题
1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;
为什么要清楚浮动?
相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;
清除浮动方式一:
解决方案:
给前面一个父元素设置高度
注意点:
在企业开发中,我们能不写高度就不写高度,所以这种方式用得很少;
CSS:
body:
我是文字1
我是文字1
我是文字1
我是文字2
我是文字2
我是文字2
清除浮动方式二:
解决方案:
给后面的盒子添加clear:both;属性
clear属性取值:
none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动,右浮动找右浮动)
left:不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)
right:不要找前面的右浮动元素
both:不要找前面的左浮动元素和右浮动元素
注意点:
当我们给某个元素添加clear属性之后,那么这个属性的margin属性就会失效;所以不推荐使用
CSS:
清除浮动方式三:
解决方案:
外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear:both;属性;
注意点:
外墙法它可以让第二个盒子使用margin-top属性,
外墙法不可以让第一个盒子使用margin-bottom属性,
不过可以通过设置额外标签的高度来实现margin效果;
搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;
CSS:
我是文字1
我是文字1
我是文字1