1. BFC演示一
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>BFC_演示1</title>
<style>
* {
margin: 0;
padding: 0;
}
/* body {
display: flex;
} */
.outer {
width: 400px;
background-color: #888;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table; */
/* overflow: hidden; */
/* column-count: 1; */
/* display: flow-root; */
}
.inner {
width: 100px;
height: 100px;
margin: 20px;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
.inner3 {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
</div>
</body>
</html>2. BFC演示二
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>BFC_演示2</title>
<style>
.box {
width: 100px;
height: 100px;
}
.box1 {
background-color: orange;
float: left;
}
.box2 {
background-color: green;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table; */
/* overflow: hidden; */
/* column-count: 1; */
/* display: flow-root; */
}
</style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
</body>
</html>3. BFC演示三
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>BFC_演示3</title>
<style>
.outer {
width: 400px;
background-color: #888;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
/* display: table; */
/* overflow: hidden; */
/* column-count: 1; */
/* display: flow-root; */
}
.inner {
width: 100px;
height: 100px;
float: left;
}
.inner1 {
background-color: orange;
}
.inner2 {
background-color: green;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
</div>
</body>
</html>
评论 (0)