对于 CSS 中块元素 以及块元素的漂浮的详细分析

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

    对于css中的块元素 相信了解过css的人都不陌生，很多时候我们往往是按照自己的思路写出了自己的关于css块的代码，去运行看看结果的时候下了一跳 ，效果和自己的目的也太大了吧，在这里我简单对块所占空间总结一下：

1、 对于css中未定位和漂浮的块，它所占的空间由它的高度和其父级块控制，它会随着文档流往下排 ，前面有元素它就另起一行，后面有元素让它自己另起一行，它是不屑于于其他元素在同一排。当然有种例外，那就是把外边距margin设置为负数就可以达到块相互交叉。

2、在块级元素叠加时，被覆盖的块元素会尽量在没被覆盖的空间上显示自己的内容，相当于块内容的自我表现，只要有空间就抓住机会。出发它的舞台被完全覆盖。

3、如果排在块元素前面的另一个块设置了漂浮，那么当前块将会自动去填充前面那个块元素的位置，知道遇到其前面未设置漂浮和定位的元素为止，当然了如果这个块和其前面的块元素如果重叠了，此块的位置则位于漂浮块的下面 属于被覆盖元素。

4、对于块来说外边距margin、内边距padding、边框border，所有加起来才算块元素占距的空间，对于外边框margin 若两块相邻的块则以margin大的为主；所有在不设置margin为负值的境况下，只要懂得了块的最基本的属性，可以说块的布局就是那么简单，因为将margin 变为负值的话往往会出现意料的结果，我知道很多人喜欢讲margin 设置为负值，想达到重叠的效果，其实我们可以通过定位或者块中设置块的方法来实现块的叠加效果。

5、要记住在正常的文档流中如果后面的块级元素被定为和前面某个元素有交集，一般是后面的块在上前端的块在下，当然这只是针对在同一层而言，还有就是这两个块都没有设置漂浮。

6、对于漂浮的块就允许 其他元素和他在同一行，在同一级别元素中它会按照漂浮方向自动跑到内嵌元素的相应方向，列入一下代码：<label>a</label><div id="left">往前飞</div> ;按正常的文档流，这个块会在a下边另起一行。但是如果设置了左漂浮这个块将会跑到这个a前面，如果空间大a可能和这个div在一行，若是这个div宽度和其父级块一样大，那么a就会被挤到下一行。

7、不要一行同时飘很多不同的块会出，这个要是出问题会很头大，我们可以将按类将这些块分开放到几个父级块中先排好父级块 在在父级快中排行分类的块，就方便控制了。

 

转载于:https://my.oschina.net/u/1162669/blog/144119