目录
CSS传统布局方式
标准流、浮动、定位
标准流(普通流/文档流)
标签按默认方式排列
块级元素占一行,上下排列
行内元素按顺序从左到右排列,碰到父元素右边缘自动换行
浮动
让多个块级元素在一行排列显示
float:left;//向左浮动
float:right;//向右浮动
设置了浮动的块元素脱离了标准流,不再占有原来的位置:
<style>
.a{
float:left;
width:50px;
height:50px;
background-color:red;
}
.b{
height:100px;
width:100px;
background-color:blue;
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
//a,b的上边缘都紧贴页面顶部
添加浮动的元素具有行内块元素特性:
<style>
div{
width:100px