有的人在写页子的时候常常会碰见这样的一个问题，就是有一个父级的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来设置裁剪区域的形状。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
