首页 > 代码库 > 子元素浮动,父元素高度为0现象解释和原理浅见

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

   有的人在写页子的时候常常会碰见这样的一个问题,就是有一个父级的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

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