浮动元素高度问题
2019-07-16 本文已影响0人
nickNic
一在标准流中内容的高度可以撑起父元素的高度
二在浮动流中内容的高度不可以撑起父元素的高度
三清除浮动方式1
1给前面一个父元素设置高度
注意点
企业开发中,能不写高度就不写高度,所以不太推荐
清除浮动方式2
给后面的盒子添加clear属性
clear属性
none:默认取值,按照浮动元素的排序规则来排序(左浮动找左浮动右浮动找右浮动)
left:不要找前面的左浮动元素
right:不要找前面的右浮动元素
both:不要找前面的左浮动元素和右浮动元素
注意点
当给某个元素添加clear属性后,那么这个属性的margin就会失效
清除浮动方式3隔墙法
外墙法
在两个盒子中间添加一个额外的块级元素
给这个额外的块级元素设置clear:both属性
注意点
外墙法可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性
内墙法
在第一个盒子中所有子元素最后添加一个额外的块级元素
给这个额外的块级元素设置clear:both属性
注意点
内墙法可以让第二个盒子使用margin-top属性
内墙法可以让第一个盒子使用margin-bottom属性
外墙法和内墙法的区别
外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度
在企业开发中不常用隔墙法来清除浮动