标准流:就是标签按照规定好默认方式排列
有很多的布局效果,标准流无法完成,比如把三个div放在一行,通过模式转化来做的话,他们之间会有空隙,而这个空隙有无法调整,所以需要利用浮动。因为浮动可以改变元素标签默认的排序方式。
网页布局第一准则:竖向排列用标准流,横向排列用浮动
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一浮动框的边缘
语法
选择器{float:属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动(默认值) |
left | 元素向左浮动 |
right | 元素向右浮动 |
重要:
作用:可以先确定父元素摆放的位置,再在父元素的盒子里放浮动元素,可以约束浮动元素在页面中显示的位置
**Question!**这里遇到了一些问题,当使用无序列表来做侧边栏的时候,把小圆点取消了,但是它还占着位置
**A!**发现了bug,原来是没有清除内外边距导致的
网页布局第二准则:先设置盒子的大小,之后设置盒子的位置
注意点:
因为父盒子很多情况下不方便给高度,但是盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子
清除浮动后,父级盒子高度就能由子级盒子决定,父级有了高度就不会影响下面的标准流了
语法
选择器{clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右浮动的影响 |
额外标签法
在浮动元素末尾加上一个空标签(块级元素),然后给这个标签清除浮动(关门)
父级添加 overflow
注意:是给父元素添加overflow:hidden;
属性值为:hidden、auto、scroll
:after 伪元素法
添加一串代码
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 用来兼容低版本浏览器 */
*zoom: 1;
}
相当于额外标签法的升级版,这个是通过css在末尾生成了一个盒子,在末尾加墙
也可以通过选择器:before{}
给盒子前面添加元素,在开头加墙