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

2019独角兽企业重金招聘Python工程师标准>>>

    一般为了方便算盒子的位置设置通配符*{margin：0；padding：0；}，为了方便理解浮动举例说明

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

办法1：给父元素一个高度就不会崩溃；

办法2：用clear：left/right/bouth清除浮动（浮动后的显示效果不变 但是父元素不会崩溃此时父元素的高度就是清除该元素浮动的高度），这样既不影响布局也实现了浮动效果；

办法3：父元素一起浮动；

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

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

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

hidden：裁剪内容，不显示多余内容，但也不添加滚动条；

scroll：裁剪内容，同时添加滚动条；

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

【指定裁剪区域用clip：rect（xx px   xx px auto auto）】

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

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

转载于:https://my.oschina.net/u/1434139/blog/190580