在CSS中,子元素的浮动对父元素的高度有着重要的影响。当子元素浮动时,父元素的高度将受到子元素高度的影响而发生改变,但是这个改变方式与我们预期的不尽相同,这里我们来看看其中的一些细节。.parent
在CSS中,子元素的浮动对父元素的高度有着重要的影响。当子元素浮动时,父元素的高度将受到子元素高度的影响而发生改变,但是这个改变方式与我们预期的不尽相同,这里我们来看看其中的一些细节。
.parent { border: 1px solid black; padding: 20px; } .child { width: 50%; height: 100px; float: left; }
上面的代码定义了一个parent元素作为容器,并且内部有两个child元素,这两个child元素都设置了50%的宽度,以及100px的高度。由于设置了float: left的属性,这两个child元素会并列排列在parent元素内部。
然后我们会发现一个现象,parent元素的高度将不再是100px的高度了,而是零。这是因为parent元素已经脱离了常规文档流,失去了对子元素高度的控制能力,而子元素的高度由于浮动后被提升了,但parent元素的高度仍然是零。
.parent { border: 1px solid black; padding: 20px; overflow: hidden; } .child { width: 50%; height: 100px; float: left; }
为了解决这个问题,我们需要为parent元素设置overflow: hidden的属性。这样一来,parent元素就会重新获得对子元素高度控制的能力,而子元素浮动后提升的高度也会被重新计算在内,从而正确地显示出parent元素的高度。
需要注意的是,当我们定义子元素的高度为百分比时,如果没有为parent元素明确指定一个高度值,那么parent元素的高度将无法正确定位,这时候需要为parent元素指定一个高度值,或者使用flex布局等其他方式。
粉丝
0
关注
0
收藏
0