晚回家 发表于 2020-4-29 01:47:55

关于CSS布局中的float问题

既然p元素和img元素都是浮动元素，会脱离文档流，那么为什么在div容器元素中添加一个元素就可以解决div容器的高度问题了呢？
我想的是浮动元素和普通元素会重叠


.news {
background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

.clear {
clear: both;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

weiter 发表于 2020-4-29 08:27:04

可能是两个元素的宽度加在一起撑大了……我也有点好奇是为什么，每次都得两个元素，不然出来的效果不忍直视……

不二如是 发表于 2020-4-29 08:40:38

如果你想采取 float 布局，这个就是“套路”记住就好...

都是 BFC 机制在起作用

ryh320 发表于 2020-4-29 16:51:56

你div的高度都是有内容撑起来的
页: [1]
查看完整版本: 关于CSS布局中的float问题