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

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

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

二、在块级元素叠加时，被覆盖的块元素会尽可能在没被覆盖的空间上显示本身的内容，至关于块内容的自我表现，只要有空间就抓住机会。出发它的舞台被彻底覆盖。

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

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

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

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

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