CSS清浮动方法

最新推荐文章于 2023-09-07 00:04:48 发布

清儿风儿

最新推荐文章于 2023-09-07 00:04:48 发布

阅读量435

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/gqguo/article/details/50512341

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

接上个例子：

给box加上一个黑色实线边框border:5px solid #000; height:s600px;看看：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>清浮动</title>
<style>
body{margin:0;}
.box{width:900px;margin:0 auto; border:5px solid #000; }<!-- height:s600px; -->
.left{width:300px;float:left;}
.left div{height:298px; background:#9F0;border:1px solid #fff;}
.center{width:300px;float:left;}
.center div{ height:198px;background:#CF0;border:1px solid #fff;}
.right{width:300px; float:right;}
.right div{ height:298px;background:#FF0;border:1px solid #fff;}

</style>
</head>
<body>
<div class="box">
	<div class="left">
    	<div></div>
        <div></div>
    </div>
    <div class="center">
    	<div></div>
        <div></div>
        <div></div>
    </div>
    <div class="right">
    	<div></div>
        <div></div>
    </div>
</div>
</body>
</html>

发现这个边框都没包住。

因为浮动会脱离文档流，所以前面那三块都浮动了，所以box就空了，自然这个边框也就啥也包不住了。

解决方法：

最简单的方法就是给box加一个高度：height:600px;

这回就显示正常了：

但是很多时候，这个元素的高度是不定的，那又如何解决呢？

清儿风儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS清浮动方法

接上个例子：给box加上一个黑色实线边框border:5px solid #000; height:s600px;看看：清浮动body{margin:0;}.box{width:900px;margin:0 auto; border:5px solid #000; }.left{width:300px;float:left;}.left div{height:298px;
复制链接

扫一扫