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

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

创新互联是一家以网络技术公司，为中小企业提供网站维护、网站制作、网站建设、网站备案、服务器租用、域名与空间、软件开发、微信小程序等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站欢迎联系：028-86922220

现在先不说解决办法，先说下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来设置裁剪区域的形状。

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。

标题名称：子元素浮动，父元素高度为0现象解释和原理浅见-创新互联
路径分享：http://dzwzjz.com/article/ehpsp.html