overflowe：hidden&clear

浮动元素的特性

• 适用于非绝对定位元素（不包括absolute,fixed元素），脱离了普通文档流，与绝对定位元素又不一样
• 如果一个元素的子元素全部是浮动元素，那么这个父元素的高度是0。
• 不会影响块元素的布局,但是会压缩同一水平（文档说的是当前和随后的）的line boxes

overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-block, table-cell和table-caption都不是块级样式，所以才会用到clear来控制浮动overflow也可以清除浮动是因为当在父级元素设置overflow时候，除了visible，就是只有auto, hidden或者scroll时候，也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果具体信息可以在这里看虽然clear是旧的方式，但还是推荐用clear来做，有些情况会比overflow处理的要好

p标签清除浮动

父框中全部是浮动元素 则父框高度为零

父框加overflow  即使父框多个div都浮动 父框也不会消失 能够撑开

overflow适合父框中元素浮动的情况   加父框

clear适合兄弟div浮动的            加同级框  

XML/HTML code

?

1 2 3

< div  style = "overflow:hidden" >     < div  style = "float:left" ></ div > </ div >

不加overflow

加

clear 兄弟div解决浮动问题

XML/HTML code

?

1 2 3 4

< div  >     < div  style = "float:left" ></ div >     < div  style=" clear:both""></ div > </ div >