float的理解

1、浮动包裹性——浮动具有让元素按displya:inline-block显示(如果没有设置宽度和高度,则它可以显示的尽量窄高
度尽量小)。
2、浮动破坏性——浮动元素漂浮在标准流之上(但没有脱离文档流),破坏了正常文档流的显示顺序。浮动元素的下一
个元素(block),会和上一个非浮动的block元素底部垂直对齐。浮动元素的垂直位置会和上一个标准流元素(block)的
底部对齐。浮动破坏了正常的line boxes,浮动元素紧挨着的下一个非浮动的block元素里面的非block元素会环绕着浮动元素(文字环绕效果)。
3、浮动跟随性——如果A、B两个元素(block)挨着且两个元素都进行浮动了,那么B元素会跟在A元素后面显示成一行
,只到宽度不够时才会被挤到下一行。
4、浮动产生父元素高度塌陷——如果一个div中有两个子div,且都是进行浮动的,如果父div没有设置高度,这时父
div的高度为0,这时就产生了高度塌陷(父元素的高度为0是因为两个子div浮动元素脱离标准流,漂浮在标准流之上,
所以不能把父元素高度撑开,可以通过清楚浮动解决)。

 

 

 

可参考

http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

http://www.w3cfuns.com/home.php?mod=space&uid=5452328&do=blog&id=5406135

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

posted @ 2015-06-02 23:04  junjieok  阅读(280)  评论(0编辑  收藏  举报