盒模型與BFC
<!DOCTYPE html>
<html>
<head>
<title>盒模型、BFC</title>
<style type="text/css">
html{
margin: 0px;
padding: 0px;
}
.hidden{
background-color: red;
overflow: hidden;
}
.hidden .child{
background-color: yellow;
height: 100px;
margin-top: 10px
}
.float{
margin-top: 60px;
background-color: red;
}
.float .left{
background-color: yellow;
height: 100px;
width: 50px;
float:left;
}
.float .right {
background-color: blue;
height: 130px;
/*clear: left;*/
/*overflow: hidden;*/
}
</style>
</head>
<body>
<!-- BFC 解決邊距重疊問題
BFC: 封閉的空間,相當於封裝,外部不會影響內部,內部也不影響外部。
作用:自適應佈局。 應用場景:清除float的影響;去margin重疊。
邊距重疊:父子元素垂直方向邊距重疊,還有上下兄弟元素,取margin-top和margin-bottom最大值;空元素取該元素margin-top和margin-bottom最大值。
-->
<div class="hidden">
<div class="child">
hidden建立bfc
</div>
</div>
<!-- BFC不與float重疊 -->
<div class="float">
<div class="left">
BFC不與float重疊 left
</div>
<div class="right">
BFC不與float重疊 right
</div>
</div>
<!-- BFC的子元素即使是float,也會參與BFC的高度計算-->
<style type="text/css">
.height{
background-color: red;
margin-top: 30px;
/*overflow: auto;*/
/*float:left; overflow都可以將子元素納入父元素height的計算*/
float:left;
}
.height .child{
background-color: pink;
float:left;
font-size:20px;
}
</style>
<div class="height">
<div class="child">
bfc child
</div>
</div>
</body>
</html>
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/818/viewspace-2816698/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 深入理解盒模型與BFC模型
- CSS定位問題(1):盒模型、浮動、BFCCSS模型
- BFC模型淺識模型
- css盒子模型與盒模型的浮動CSS模型
- 標準盒模型和怪異盒模型模型
- “盒模型”初探模型
- CSS盒模型CSS模型
- css 盒模型CSS模型
- 盒模型-深入理解盒模型及相關概念模型
- 精通CSS盒模型CSS模型
- css之盒模型CSS模型
- CSS盒模型深入CSS模型
- css-盒模型CSS模型
- 盒模型舉例模型
- 學習BFC與IFC
- css&&js盒模型CSSJS模型
- CSS盒模型詳解CSS模型
- css3盒模型CSSS3模型
- 詳解CSS盒模型CSS模型
- 關於盒子模型的BFC總結模型
- 前端面試之盒模型前端面試模型
- 彈性盒模型Flex指南模型Flex
- CSS的兩種盒模型CSS模型
- day02-layout盒模型模型
- 彈性盒模型,flex佈局模型Flex
- 前端面試2:CSS盒模型前端面試CSS模型
- CSS系列 (04):盒模型詳解CSS模型
- 一張圖秒懂js盒模型JS模型
- 第 16 章 CSS 盒模型[上]CSS模型
- 第 16 章 CSS 盒模型[下]CSS模型
- BFC的概念與應用場景
- 004-盒模型及文字溢位模型
- Css規範整理:2、css盒模型CSS模型
- BFC原理
- BFC理解
- 理解BFC
- CSS2中盒模型與佈局的一些概念關係CSS模型
- 關於盒模型相關的問題模型