关于布局中float的常见问题及解决办法

比眉伴天荒 2022-07-17 02:26 277阅读 0赞

在网页的布局中，我们经常要使用到float在进行元素的排版，那么随之而来的就是许多的问题，个人在开发过程中最常见的问题主要就是两种，一种是元素的浮动导致的布局混乱的问题，另一种是浮动后的盒子模型塌陷问题。

首先，要了解浮动就要先了解网页布局的原理。个人认为，网页在布局的过程中你可以把它看成是一个三维立体的空间，常规流元素因为重力的原因是在最底层依次按顺序往下排，而absolute和float元素这些不占用常规流的元素是脱离了重力漂浮在空中，但是它还是属于包含着它的盒子元素的。

那么了解原理后其实两个问题就可以一起解释了。

元素浮动后，他失去了重力，同时它在地上的位置也没有东西了，那么父级元素就会认为这里没有元素，而后面的元素也会挤过来，所以就会出现了我们在平时布局中碰到的两种问题了，父级被挤压，而后面的元素有一部分出现在了float元素本来的位置。既然我们已经知道了问题的所在，那么解决问题的方法其实也是很简单的，就是告诉父级元素和后面的元素，我虽然浮起来了，但是这块地还是我的，你们不能占用。

**1**、overflow方法，给父级元素一个overflow：hidden，设置高度值为auto，在没有明确高度限制的情况下，那么父级元素在隐藏超出他的元素是就会把浮动元素考虑在内，这样就防止了盒子模型的塌陷，同时，既然盒子不塌陷了，那么后续的元素就不能过来占用float原本的位置，顺便达成了清除浮动的目的，但是在实际的清除浮动过程中overflow这种方法会出现许多不可预知的问题，所以不建议使用overflow清除浮动。附上官方对于overflow解决盒子塌陷问题的解释：

因为overflow.hidden会触发BFC。BFC 全称是块级排版上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

**2**、clearfix方法，这种方法在实际的使用过程中使用的比较广泛，网上的将解析也比较全，这种方法的原理我认为是使用clearfix后告诉后面的元素，前面的元素是浮动的，他们的位置是不能占用的。当然这种方法在使用过程中要注意clearfix添加的位置。clearfix是加在浮动元素的父级的class中，但是有时候会因为某些未知的原因失效，此时，只需要一个空标签（p、div这些都可以）设置class为clearfix并且放在浮动元素的父级元素和下一站元素的中间即可，这也算是第三种方法的一个改进吧。

**3**、clear：both方法，其实就是第二种方法中使用空标签的时候换一个class，而这个class中只需要一句话clear：both即可，不过在实际工作中我喜欢使用第二种里面的空标签方法多一点。

附：.clearfix:after \{   
    content:"";   
    display:block;   
    height:0;   
    clear:both;   
\}   
.clearfix \{\*zoom:1;\}//兼容ie