子元素浮动，父元素高度为0现象解释和原理浅见

Posted 2020-08-04

   有的人在写页子的时候常常会碰见这样的一个问题，就是有一个父级的div下面有子元素，子元素浮动起来后，父元素的高度变成0，撑不起来父级了。

  现在先不说解决办法，先说下float属性，float定义：float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。（摘自：w3c）。

  从定义看出，其实float属性一开始是被应用与图片，来形成文字环绕效果的，任何的元素只要定义了float属相，就自动的变成一个块级元素，同时本身就拥有了宽、高等属性。

  由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。摘自w3c。 从这句话中看出，其实定义了float属性后，其自身是脱离普通文档流的，所以父级就会变为0.

  知道原因后，其实很容易找到解决办法了，那就是清除浮动，或者让其父元素跟着浮动，还有一种办法就是其父元素属性加上 overflow:hidden,下面说下为什么加上这个属性就会解决这个问题。

  这个属性的定义：overflow 属性规定当内容溢出元素框时发生的事情。摘自w3c。 看其字面意思，其实就是在他内容超出后所作的措施，那为什么父级加上这个属性后，浮动就会关闭。overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动；

   overflow有4个值：

    visible 元素的内容在元素框之外也可见，内容超出元素框时不会改变元素框的形状。

    scroll 元素的内容会在元素框的边界处裁剪，溢出的内容将看不见，但是浏览器会使用一个滚动条（或类似的东西）来访问溢出的内容，不会改变元素本身的形状。

    hidden 元素的内容会在元素框的边界处裁剪，不过不会提供滚动接口使用户访问溢出的内容，也就是说被裁剪的内容对用户来说不可用。

    auto 由浏览器自动判断采用何种行为，不过都建议在必要时提供一个滚动机制。

    overflow:hidden可以清楚浮动，overflow:scroll清除浮动时会产生滚动条，overflow:auto清除浮动

          

另外，如果一个绝对定位元素的内容溢出了其内容框，而且overflow设置为要求裁该内容，可以通过使用属性clip来设置裁剪区域的形状。

本文出自 “IT司马” 博客，请务必保留此出处http://itsima.blog.51cto.com/3918312/1843205