浮动元素旁边是否默认获得填充?

时间:2012-02-13 09:55:59

标签: css css-float padding

I have setup a container and three divs inside. First two are floated and third one is not floated。 (第四个div只是为了阐述我的问题而添加)

I have changed border of first two divs to be transparent to depict it more clearer that thirdDiv is starting right from the firstDiv while placing content of itself ('THIRD') right after secondDiv.

thirdDiv('THIRD')的内容紧跟在secondDiv之后

你可以看到thirdDiv实际上从一开始就开始了边界

所以,我的问题是浮动元素(thirdDiv)旁边的默认情况下会从该方向获取填充吗?因为它在我的代码中显示为155px。

1 个答案:

答案 0 :(得分:3)

不,默认情况下,非浮动元素不会填充。容器从浮动的div下面开始。但是,div中的内容尊重浮动并被推向右侧。如果您将overflow:hidden应用于非浮动容器,则它具有“自动边距”,尊重浮动的div。 (你可以看到这个here - 出现左边框。)

编辑:有效的是喜欢填充,虽然没有填充!

Example with overflow hidden

Example without overflow hidden and no padding

Example without overflow hidden and padding left

注意边框和额外文字的位置!

编辑2:取决于更大的值,您的css定义的填充或计算的填充(浮动的宽度)正在应用。在每种情况下,您定义的填充和“计算浮动填充”都会崩溃!