首先,先认识一下标准流
css中一共有三种手段,使一个元素脱离标准文档流:
1) 浮动
2) 绝对定位
3) 固定定位
标准流也被称为文档流,是指在不借助任何特殊的css排列规则元素的排布规则。
标准流的特性:
-
空白折叠现象:比如,如果我们想让img标签之间没有空隙,必须紧密连接:
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
-
内容高矮不齐,底边对齐:
-
自动换行
浮动是css里面布局用的最多的属性
两个元素并排了,附上代码:
box1{
float: left;
width: 300px;
height: 400px;
background-color: yellowgreen;
}
.box2{
float: left;
width: 400px;
height: 400px;
background-color: skyblue;
}浮动想学好,一定要知道三个性质。
1.浮动的元素脱标
证明1:
.box1{
float: left;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
.box2{
width: 300px;
height: 300px;
/* float: left; */
background-color: skyblue;
}
box1脱离文档流,覆盖在box2上面。
证明2:
一个span标签不需要转成块级元素,就能够设置宽度、高度了。所以能够证明一件事儿,就是所有标签已经不区分行内、块了。也就是说,一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
2 .浮动的元素互相贴靠
如果有足够空间,那么就会靠着box2哥。如果没有足够的空间,那么会靠着box1号大哥。
如果没有足够的空间靠着box1号大哥,自己去贴左墙。
3.浮动的元素有“字围”效果
4. 浮动的元素收缩
一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。
.box1{
float: left;
/* width: 300px;
height: 400px; 没有设置宽高度*/
background-color: yellowgreen;
}
.box2{
float: left;
width: 100px;
height: 100px;
background-color: skyblue;
}
.box3{
float: left;
width: 300px;
height: 300px;
background-color: darkblue;
}
接下来是浮动的关键:清除浮动:
现在有两个div,div身上没有任何属性。每个div中都有li,这些li都是浮动的。
<div class="main">
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
</ul>
</div>
<div class="box2">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
</div>
</div>
我们本以为这些li,会分为两排,但是,第二组中的第1个li,去贴靠第一组中的最后一个li了。
原因是父元素没有设置高度,不能给自己浮动的孩子们一个容器。
清除浮动的方法一:给父亲设置高度
只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
清除浮动方法二:clear:both;
clear:both;算是最常见的方法吧。
网页制作中,高度height很少出现。因为如果把高度写死了,之后内容过多的时候页面就会乱了。会被后端人员骂死了。
有人就提出疑问了能不能不写height,也把浮动清除了呢?也让浮动之间,互不影响呢?
.main ul li{
float: left;
background: red;
list-style: none;
}
.main div{
/* height: 50px; */
border: 1px solid salmon;
}
.box2{
clear: both;
margin-top: 5px;
}
给box2加了一个clear:both;的样式,效果如下:
这种方法有一个非常大的、致命的问题,margin失效了。
清除浮动三:隔墙法
<div class="main">
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
</ul>
</div>
<divc class="h20"></div>
<div class="box2">
<ul>
<li>语文</li>
<li>数学</li>
<li>英语</li>
<li>物理</li>
</ul>
</div>
</div>
中间加一个div撑开当作两个div之间的距离,并且清除浮动。
.h20{
height: 20px;
clear: both;
}
这些年出现了一种内墙法
<div class="box1">
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
<li>vue</li>
<div class="clear"></div>
</ul>
</div>
.clear{
clear: both;
}
就是再浮动的元素下面加多一个类专门清除浮动的。这样做父类删除线格式 也能被儿子撑出高度,也会消除浮动带来的影响。(我用的最多的一种)
清除浮动三:overflow:hidden;
overflow:hidden;原本表示溢出隐藏。
也可以用来解决一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给浮动元素父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了。这是一个偏方。
这个现象,不能解释,就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。