清除浮动

陈善强

于 2021-05-25 17:13:38 发布

阅读量79

点赞数

分类专栏： Css 文章标签： css

本文链接：https://blog.csdn.net/chenshanqiang/article/details/117260185

版权

Css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

代码如下

<style>
    .box { border: 1px solid #ccc; background: pink; }
	.red, .green, .blue { float: left; width: 100px; height: 100px; }
 	.red { background: red; }
 	.green { background: green; }
 	.blue { background: blue; }
</style>
<body>
<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

使用clear:both清除浮动

...
<div class="blue"></div>
<div style="clear:both"></div>

利用伪元素clearfix来清除浮动

.clearfix::after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
 }
.clearfix{
	*zoom:1;/* IE6、7 专有 */
}

使用CSS的overflow属性

.box{
	border:1px solid #ccc;
	background:#eff2f4;
	overflow: auto/hidden;
}

陈善强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
清除浮动

代码如下<style> .box { border: 1px solid #ccc; background: pink; } .red, .green, .blue { float: left; width: 100px; height: 100px; } .red { background: red; } .green { background: green; } .blue { background: blue; }</style><body&g
复制链接

扫一扫