清浮动方法
程序员文章站
2022-03-29 17:08:52
...
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
.div2{height: 50px;width: 50px;background-color: #000000;float: left;
/* display: inline-block;*/}
/*清浮动方法3 ：用inline-block代替浮动，但会引起换行解析为空格的问题以及无法设置margin auto*/
.outside{width: 500px;/*height: 500px;*/
/*清浮动方法1 ：给父级元素设置高度*/
/*float: left;*/
/*清浮动方法2： 给父级元素设置浮动，使之与子元素在同一层*/
background-color:blueviolet ;
border: 5px solid red;}
.div1{height: 300px;width: 300px;background-color:gold;float: left;}
/*.clearfix{clear: left;}*/
/*清浮动方法 ： 给父级元素添加一个DIV空标签，清除一侧浮动*/
</style>
</head>
<body>
<div class="outside">
<div class="div1">123</div>
<div class="div2">456</div>
<div class="clearfix"></div>
<!--<br clear="left" />-->
<!--清浮动方法4： 使用空格标签设置清除浮动-->
</div>
</body>
</html>
待补充。。。
更多专业前端知识，请上【猿2048】www.mk2048.com