怎样处理float后防止父元素崩溃

    通常为了方便算盒子的位置设置通配符*{margin:0;padding:0;},为了方便理解浮动举例说明布局

例:有3个盒子 div1,div2,div3,         div2,div3在div1里面普通文档流中盒子div2,div3撑开div1,高度是盒子2,3的内容高度,当div2,div3float  div1就脱离文档流崩溃,如给div1设置了高度可是低于div2,div3内容高度 则内容溢出,可用overflow:hidden隐藏多余内容,spa

办法1:给父元素一个高度就不会崩溃;ip

办法2:用clear:left/right/bouth清除浮动(浮动后的显示效果不变 可是父元素不会崩溃此时父元素的高度就是清除该元素浮动的高度),这样既不影响布局也实现了浮动效果;文档

办法3:父元素一块儿浮动;it

办法4:给父元素加overflow:hidden。cli


此处顺便说明overflow属性的取值有 visible/hidden/scroll/autoscroll

visible:默认值,不裁剪内容,也不添加滚动条,强制显示多余内容;margin

hidden:裁剪内容,不显示多余内容,但也不添加滚动条;di

scroll:裁剪内容,同时添加滚动条;清除浮动

auto:自动处理内容跟滚动条。

【指定裁剪区域用clip:rect(xx px   xx px auto auto)】


通常为了防止单独达到清除效果而另外设置一个元素而影响布局通常给该元素以下属性:

xxx:after{contert:"." ; height:0 ; visibility:hidden; display:block;  clear:both;}

相关文章
相关标签/搜索