css如何清除浮动

2022-06-09 小知识

平常工作中，我们会在css里使用浮动属性(float) ，浮动属性会使父级标签货币熬不到高度。所以今天给大家介绍下css如何清除浮动

文章插图

需要这些哦
电脑
css+html
代码编纂器（本文用的HBuilder）
方式/
1打开编纂器，在编纂器里新建一个index.html ，用来给大师介绍css若何断根浮动

文章插图

2在index页面里新建一个calss为parent的div,在parent里面建两个子类div：childA ， childB

文章插图

3【css如何清除浮动】在css标签里，给parent设置布景，别离给childA ， childB设置宽度，高度和边框色，而且利用float属性，使两者显示在统一行

文章插图

4在浏览器中打开index.html ，此时会发现parent布景色没有显示出来，这是因为浮动让它获取不到内部高度

文章插图

5回到编纂器里，在css标签里，给parent加上overflow: hidden属性

文章插图

6在浏览器中再次打开index.html,发现parent的布景色已经可以显示出来，证实断根浮动当作功！

文章插图

7贴一下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css若何断根浮动</title>
</head>
<style>
.parent{
background: green;
overflow: hidden;
}
.childA{
width: 200px;
height: 200px;
float: left;
border: 1px solid #000000;
margin-right: 20px;
}
.childB{
width: 200px;
height: 200px;
float: left;
border: 1px solid #000000;
}
</style>
<body>
<div class="parent">
<div class="childA"></div>
<div class="childB"></div>
</div>
</body>
</html>

注重事项clear:both 属性也可以断根浮动~
路过的请给个赞哦~

以上内容就是css如何清除浮动的内容啦，希望对你有所帮助哦！

推荐阅读

上一篇：小蓝本10级升11级时要为经验添加标签

下一篇：微信公众号怎么修改头像