- 默认文档流:
块级元素独占一行,宽高默认父级的100%
行内元素与其他元素共享一行 宽度高度都由内容决定
- 浮动布局
float: right left none onherit布局 (div ul>li )
- 行级布局
利用块级元素的特点
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
- 列级布局
块元素在一行中显示
在默认文档流中,块独占一行空间。
浮动可以使得一个元素脱离默认文档流。
1) 宽度,高度都由内容决定
2) 多个浮动元素在一行中排布
2.1 子元素浮动后无法支撑父元素
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
::after
</ul>
<div class="content"></div>
<style>
ul>li {
float:left;
}
</style>
<!--1)one two three在一行中排布
2)ul的高度为0
-->
2.2 两个兄弟元素中其中一个元素浮动,一个不浮动
<style>
.content > div {
height:100px;
}
.content > .left {
float:left;
width:100px;
}
.content > .right {
width:200px;
}
</style>
<!--1) left right
2) content高度为100px-->
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
2.3 多个浮动在一行,如果父元素的一行中无法容纳这么多元素 换行
- 清除浮动
对父元素
overfloat:hidden;
添加伪元素
::one{
content:' ';
display:block;
clear:both;
}