<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>Document</title>
</head>
<body>
<!-- 解决margin折叠 -->
<h2>margin折叠</h2>
<div class="container-a">
<div class="a-b1-wrapper">
<div class="a-b1"></div>
</div>
<div class="a-b2"></div>
</div>
<!-- 三栏布局 -->
<h2>三栏布局</h2>
<div class="container-b">
<div class="b-b1"></div>
<div class="b-b2"></div>
<div class="b-b3">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa test word
</div>
</div>
<!-- 解决文字环绕浮动元素 -->
<h2>解决文字环绕浮动元素</h2>
<div class="container-c">
<div class="c-b1"></div>
<div class="c-b2">这是文字这是文字这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文这是文字这是文</div>
</div>
</body>
</html>/* margin折叠 */
.container-a {
width: 400px;
height: 200px;
background-color: gray;
overflow: auto; /* 形成BFC */
.a-b1-wrapper {
overflow: auto; /* 形成BFC */
}
.a-b1 {
height: 40px;
margin: 20px 0;
background-color: red;
}
.a-b2 {
height: 40px;
margin: 10px 0;
background-color: pink;
}
}
/* 三栏布局 */
.container-b {
.b-b1 {
width: 400px;
height: 200px;
float: left;
background-color: red;
}
.b-b2{
width: 400px;
height: 200px;
float: right;
background-color: yellow;
}
.b-b3 {
height: 200px;
background-color: pink;
overflow: hidden;
word-break: break-word;
}
}
/* 解决文字环绕浮动元素 */
.container-c {
width: 500px;
.c-b1 {
width: 200px;
height: 100px;
float: left;
background-color: pink;
}
.c-b2 {
background-color: blue;
overflow: auto; /* 形成BFC */
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.