<!DOCTYPE html>
<html>
<head>
<title>css盒模型</title>
<style type="text/css">
html *{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- BFC垂直方向边距重叠 -->
<section id="margin">
<style>
#margin{
background: pink;
overflow: hidden;
}
#margin p{
color: #f55;
background: #fcc;
width: 100px;
line-height: 50px;
text-align:center;
margin: 50px;
}
</style>
<p>1</p>
<p>2</p>
<div style="overflow: hidden;">
<p>3</p>
</div>
</section>
<!-- BFC不与float重叠 -->
<section id="layout">
<style media="screen">
#layout{
margin-top: 50px;
background: red;
}
#layout .left{
float: left;
width: 100px;
height: 100px;
background: yellow;
}
#layout .right{
width: 500px;
height: 130px;
background: green;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>
<!-- BFC子元素即使是float也会参与计算 -->
<section id="float">
<style media="screen">
#float{
margin-top: 50px;
background: red;
overflow: hidden;
}
#float .float{
float: left;
font-size: 30px;
}
</style>
<div class="float">我是浮动元素</div>
</section>
<!-- 利用BFC清除内部浮动 -->
<section class="par">
<style type="text/css">
.par {
margin-top: 50px;
border: 5px solid #fcc;
width: 300px;
/*利用BFC清除内部浮动*/
overflow: hidden;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<div class="child"></div>
<div class="child"></div>
</section>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
