子元素浮动，父元素高度为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来设置裁剪区域的形状。

转载于:https://blog.51cto.com/itsima/1843205

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

html让空间高度跟随父级,CSS子元素跟父元素的高度一致的实现方法
绝对定位方法: (1)将父元素设置为相对定位,不写父元素的高度时,会随着左边的子元素高度变化而变化 .parent { /*关键代码*/ position: relative; /*其他样式*/ wi ...
子元素scroll父元素容器不跟随滚动JS实现
小tip: 子元素scroll父元素容器不跟随滚动JS实现这篇文章发布于 2015年12月18日,星期五,00:07,归类于 js实例. 阅读 44546 次, 今日 41 次 by zhangxi ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
float子元素超出父元素解决办法
使用float 子元素浮动,如果子元素比父元素大,会撑开父元素此时在父元素上加上 overflow:hidden
parentElement:返回当前元素的父元素节点（IE不兼容）、children:只返回当前元素的元素子节点、childElementCount、firstElementChild、......
parentElement:返回当前元素的父元素节点(IE不兼容,IE9以下) <!DOCTYPE html> <html lang="en"> <h ...
获取子元素到父元素滚动距离
getElementTop (el) {// 获取ele元素距离父元素的offsetTop值let actualTop = el.offsetTop;// 获取该元素的有定位的父级元素let curr ...
子元素超出父元素宽高是否会报错？
目前来看,如果父元素是Container,那么子元素超出父元素就不会报错: 如果子元素被Column或Row包裹,那么子元素超出父元素就会报错: RenderFlex overflowed by 22 ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...

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

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

最新文章

热门文章