ock
块级元素转化为行内元素,使用display:inline
标准文档流和脱离标准流
web网页的制作,就像是一个“流”,从上而下,像“织毛衣”。
标准文档流下的微观现象:
- 空白折叠现象
- 高矮不齐,底边对齐
- 文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器查看我们的页面总会发现底边对齐。
- 自动换行,一行写不满,换行写
- 如果在一行内写文字,文字过多,那么浏览器会自动换行去显示我们的文字。
标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流!
css中一共有三种手段,使一个元素脱离标准文档流:
总结
浮动四大特性
- 浮动的元素脱标
- 浮动的元素互相贴靠
- 浮动的元素有“字围”(文字围绕)效果
- 所谓字围效果,当div浮动,p不浮动,div遮盖住了p,div的层级提高,但是p中的文字不会被遮盖,此时就形成了字围效果。
- 浮动元素紧凑效果(收缩)
- 一个浮动元素。如果没有设置width,那么就自动收缩为文字的宽度(这点跟行内元素很像)
布局浮动的原则
按布局来说,一般都不会是一个盒子单独浮动起来,往往是横向区域的盒子一起浮动。且为了不影响接下来的文档标准流,往往也要收尾做出清除浮动。
为什么要清除浮动?
在页面布局的时候,每个结构中的父元素的高度,我们一般不会设置。(为什么?)
试想想,如果我第一版的页面的写完了,感觉非常爽,突然隔了一个月,产品经理说页面某一块的区域,需要加点内容,或者觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白,肯定是去每个地方加内容,改图片,然后修改父盒子的高度。那问题来了,这样不影响开发效率吗?答案是肯定的。
所以父盒子我们一般不设置高度,而由子元素的内容去撑起父盒子的高度。那么当这个子元素是浮动的时候,父盒子没有高度,浮动子元素是不会填充父盒子的高度的,这个时候就会有下一栏的盒子跑过来到浮动子元素的下面被覆盖摭挡了,非常影响页面布局。
浮动元素确实能实现我们页面元素并排的效果,这是它的好处,但同时它还带来了页面布局极大的错乱!!!所以我们要在浮动完之后再做一步清除浮动的操作(并不影响浮动子元素之前的布局,只是为了下排的布局不乱。)
清除浮动的方法
visible |
默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden |
内容会被修剪,并且其余内容是不可见的。 |
scroll |
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto |
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit |
规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow:hidden清除法。其实它是一个BFC区域。
BFC常见作用
- 包含浮动元素,解决高度塌陷和清除浮动;
- 不被浮动元素覆盖(比如文字围绕效果);
- 阻止外边距折叠(margin塌陷)
- 在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象。可以用overflow:hidden产生bfc来解决。
end
2018-06-01