文档流
文档流是文档中可显示对象在排列时所占用的位置
(块标签在文档流中的默认排列方式是从上到下,内联标签在文档流中的默认排列方式是从左到右)
float特性
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
float取值
right
left
none(默认值:不具备 浮动)
这个是两个盒子box1和box2:
然后我们给它的box1添加一个左浮动:
它就会变成下面这个样子:
这个box1,也就是这个黄色的方块浮在了红色方块的上面,它已经脱离了原来的文档流,而红色的方块掉了下去,所以它就靠左了。
那如果我把这个box1改为右浮动,它就会变成下面这个样子:
黄色的方块就会浮到右边。
那如果我给这个box2也添加一个左浮动,那么这个红色的方块也会沿着父容器靠左,但是左边已经有黄色方块了,这时候它就会挨着黄色的方块靠右进行排列。
float的注意事项
- 只会影响后面的元素
- 内容默认提升半层
- 默认宽根据内容决定
- 换行排列
- 主要给块元素添加来实现布局,也可以给内联元素添加(但是很少用到)
就比如下面这张图片,我们是给红色的方块加了一个左浮动,让它浮在了上面,然后再给蓝色方块里加入文字,发现文字并没有被红色方块所覆盖,因为这个文字的层级要高于蓝色方块,所以它被挡到了外面。
这样的一个现象可以做一些图文混排的效果,红色区域可以做一个图片,然后文字区域可以做一些图片的描述
这个就是当浮动的元素在父容器中排列不下的情况下,它就会自动折行,会排到下面。
由于浮动会影响到后面元素的布局,而有的时候我们不希望下面的元素受到影响,所以我们要考虑清除浮动:
如何清除浮动?
上下排列:clear属性,表示清除浮动的 left、right、both
嵌套排列:
固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素
overflow:hidden(BFC规范),如果有子元素想溢出,那么会受到影响。
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
设置空标签:不推荐,会多添加一个标签。
after伪类:推荐,是空标签的加强版,目前各大公司的做法。
(clear属性指挥操控块标签,对内联标签不起作用)