浮动元素:浮动元素的框可以向左或者向右移动,直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止;浮动元素不在文档普通流之中,因此文档普通流中的块级元素感知不到浮动元素的存在。
对父容器的影响:不与父容器发生外边距合并。无法撑开父元素。
对其他浮动元素的影响:父容器足够宽,与其他浮动元素同一水平方向依次排列。父容器宽度在同一水平方向上不能同时容纳全部浮动元素时,超出父容器宽度的浮动元素向下移动,直到有足够的空间,如果水平排列三个以上高度不同浮动元素,那么向下移动的时候可能被卡住。
对普通元素的影响:浮动元素之前的普通元素不受影响。浮动元素之后的普通元素因感知不到浮动元素的存在会被浮动元素覆盖。
对文字的影响:文字所在行框因为浮动元素的挤压而缩短,从而围绕浮动元素排列。
清除浮动指:消除浮动元素对其他元素因浮动元素造成的高度塌陷的问题。
清除浮动的方法:
clear: both
或者clear: left
或者clear: right
;三种定位方式:
因为绝对定位的元素脱离了普通流,所以绝对定位的元素可以覆盖页面上的其它元素。这时可以通过给元素设置z-index属性来控制叠放顺序,该属性值越高,元素位置越靠上。
1、BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
使用一定的CSS声明可以生成BFC,浏览器对生成的BFC有一系列的渲染规则,利用这些渲染规则我们可以达到一定的布局效果,为了达到特定的布局效果我们让元素生成BFC。
BFC的特性:
2、如何生成BFC:
3、BFC有什么作用: