您的位置：首页 > 其它

清除浮动的几种方式

2018-01-29 23:10 323 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="utf-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge">
<title>清除浮动</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<link
rel="stylesheet"
type="text/css"
media="screen"
href="main.css" />
<script
src="main.js"></script>
<style>

.content{
                 width:
500px;
                 /* height: 300px; */
                 background-color:
pink;

                 /* overflow:hidden; */
4000

/* 清除浮动方式二
给父盒子设置overflow:hidden
如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。*/
             }

             .left{
                 width:200px;
                 height:
300px;
                 background-color:
#CC12F2;
                 float:
left;
             }

             .right{
                 width:300px;
                 height:
300px;
                 background-color:#1CCBEA;
                 float:
left;
             }

             .footer{
                 height:
50px;
                 width:500px;
                 background-color:
black;
             }

/* 清除浮动方式一 */

             /* .clearfix{
                 clear: both;
             } */

/* 清除浮动方式三
这个是最好的一种清除浮动的方法
*/

.clearfix:after{
             content:"";
                 /* display: block; 块级显示 */
                 clear:
both;
                 height:0;
                 line-height:0;
                 visibility:
hidden;
             }
             .clearfix{
                zoom:
1; /* 为了兼容IE浏览器 */
             }

</style>

</head>
<body>



         <div
class="content clearfix">


<div
class="left"></div>
<div
class="right"></div>

<div
class="clearfix"></div>

</div>
<div
class="footer"></div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航