<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>bfc问题与解决办法</title>
<style>
*{margin: 0; padding: 0;}
.box1{
width: 300px; height: 300px;
background: red;
/* 第一种方法
border: 1px solid transparent;*/
/* 第二种方法
overflow: hidden;*/
/* 第三种方法
display: inline-block;*/
/* 第四种方法
padding-top: 1px;*/
/* 第五种方法
在子元素添加浮动
float: left;*/
/*
第六种方法
外层元素添加 before 伪类 display: table;
*/
}
.box1:before{
display: table;
content: "";
}
.box2{
width: 100px; height: 100px;
background: green;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
bfc 6种方法
最新推荐文章于 2023-02-25 11:53:52 发布