[已解决]关于CSS布局中的float问题

晚回家

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

1. .news {
   
2.   background-color: gray;
   
3.   border: solid 1px black;
   
4.   }
   
5. 
   
6. .news img {
   
7.   float: left;
   
8.   }
   
9. 
   
10. .news p {
    
11.   float: right;
    
12.   }
    
13. 
    
14. .clear {
    
15.   clear: both;
    
16.   }
    
17. 
    
18. <div class="news">
    
19. <img src="news-pic.jpg" />
    
20. <p>some text</p>
    
21. [b]<div class="clear"></div>[/b]
    
22. </div>

复制代码

最佳答案

月排行榜 / 总排行榜

不二如是

2020-4-29 08:40:38

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

都是 BFC 机制在起作用

跳转到最佳答案楼层

weiter

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

不二如是

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

都是 BFC 机制在起作用

ryh320

你div的高度都是有内容撑起来的