教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 329 CSS
css怎么清除浮动？附3种方法
来源：互联网
2023-03-16 19:15:35 242
我们在写html页面布局的时候，经常会用到浮动float属性，导致父级对象盒子不能被撑开，那么我们如何清除浮动呢，我们一起看一下！
工具/原料
- 电脑（win 10）
- Hbuilder
方法/步骤 clear:both
首先我们使用hbuilder,新建一个html文件，写上内容，如下图：
给两个子标签，设置宽高，背景色，发现一行显示一个，如下图：
设置浮动，让两个div并排显示，并给父级加背景色，如下图：
没有清除浮动，父级背景色不显示，必须清除浮动，clear:both ,如下图：
方法/步骤2 overflow:hidden
给父级直接加样式overflow:hidden，如下图：
方法/步骤3 伪类:after 和 zoom
使用伪类，给父级加样式，
.clearfix:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfix{
zoom:1
}
浏览器兼容性好，不容易出现怪问题
如下图：
注意事项
- 个人推荐最后一种清除浮动的方法！
- 你还有别的清除浮动的方法吗，欢迎留言！
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 475 CSS
-
css基础教程：[1]为网页使用网络字体详细阅读
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg)
css基础教程：[1]为网页使用网络字体,本教程为大家介绍在网页上怎么使用网络字体。1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，2，不依赖于用户电脑上是否安装了该字体。......
2023-03-16 323 CSS