如何使用CSS的overflow属性防止float撑开div

CSS代码:

CSS Code复制内容到剪贴板

1. .content {   

2.     border: 1px solid red;   

3. }   

4. .div1 {   

5.     width: 100px;   

6.     height: 100px;   

7.     background-color: cyan;   

8. }  

效果如下：

在content中添加一个div1，并设置了content标签的边框和div1标签的大小和颜色，看到content标签把div1标签包裹起来了。并且还撑起了content标签的大小

但，当我们设置了div1向右浮动的属性之后

CSS Code复制内容到剪贴板

1. .div1 {   

2.     width: 100px;   

3.     height: 100px;   

4.     background-color: cyan;   

5.     float: rightright;   

6. }  

就会变成这个样子：

div1标签确实右对齐了，但是并没有撑起content标签的高度。
莫着急，我们需要设置一个属性，就是给content标签，添加overflow属性

添加属性 (overflow: hidden;)

CSS Code复制内容到剪贴板

1. .content {   

2.     border: 1px solid red;   

3.     overflow: hidden;   

4. }  

添加完之后，效果就成了这样

感谢你能够认真阅读完这篇文章，希望小编分享的“如何使用CSS的overflow属性防止float撑开div”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!