以下从浮动
到BFC
的段落 摘自的相关博文,再加以整理和添加自己的一点思路而成。
级别 | 元素 |
---|---|
行内元素 | a,b,strong,span,img,label,button,input,select,textarea |
块级元素 | header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer |
web网页的制作,就像是一个“流”,从上而下,像“织毛衣”。
标准文档流下的微观现象:
标准流里面的限制非常多,导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高,那该怎么办呢?办法是:移民!脱离标准流!
css中一共有三种手段,使一个元素脱离标准文档流:
按布局来说,一般都不会是一个盒子单独浮动起来,往往是横向区域的盒子一起浮动。且为了不影响接下来的文档标准流,往往也要收尾做出清除浮动。
在页面布局的时候,每个结构中的父元素的高度,我们一般不会设置。(为什么?)
试想想,如果我第一版的页面的写完了,感觉非常爽,突然隔了一个月,产品经理说页面某一块的区域,需要加点内容,或者觉得图片要缩小一下。这样的需求在工作中非常常见的。真想打他啊。那么此时作为一个前端小白,肯定是去每个地方加内容,改图片,然后修改父盒子的高度。那问题来了,这样不影响开发效率吗?答案是肯定的。
所以父盒子我们一般不设置高度,而由子元素的内容去撑起父盒子的高度。那么当这个子元素是浮动的时候,父盒子没有高度,浮动子元素是不会填充父盒子的高度的,这个时候就会有下一栏的盒子跑过来到浮动子元素的下面被覆盖摭挡了,非常影响页面布局。
浮动元素确实能实现我们页面元素并排的效果,这是它的好处,但同时它还带来了页面布局极大的错乱!!!所以我们要在浮动完之后再做一步清除浮动的操作(并不影响浮动子元素之前的布局,只是为了下排的布局不乱。)
给浮动子元素的父盒子,也就是不浮动的元素,添加一个clearfix的类,然后设置。
.clearfix:after{ /*要写这三句话去实现*/ content: '.'; clear: both; display: block; }
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
逐渐演变成overflow:hidden清除法。其实它是一个BFC区域。
end
2018-06-01
如对本文有疑问, 点击进行留言回复!!
网友评论