css查漏补缺（1）——浮动

Posted on | In | | reads times

CSS浮动

刷面经的时候看到的问题，为什么使用浮动？
最近一直在用flex布局，如果想要内部元素横向排列用flex就解决了，所以有点忘记关于float的知识。
回顾一下~

比较喜欢追根溯源

首先

什么是文档流？

文档流是文档元素正常排列的规则。
块级元素是从上到下排列，内联元素是从左到右排列。

Q：如果想要你的块级元素从左到右排，怎么办呢？
A：使用display:inline-block;

Q：如果希望你的元素相对自己本身的位置定位到别的地方呢？
A：使用position:relative;

Q：如果希望你的元素相对别的元素定位呢？
A：向上给某个父级以上的元素使用position:relative；自身使用position:absolute;

Q：那么你又想你的元素从右到左排列呢？
A：就需要用到float。

这里就需要了解一个相对的概念，脱离文档流。
当元素脱离文档流后，元素将不再对父级元素产生布局影响，不会影响父级元素的宽高。
举个栗子：如果子元素高度100px，父元素未设置高度，父元素高度完全依靠子元素撑开，如果子元素脱离文档流，则父元素高度为0；

那么当你想要元素从右到左排列，但是又不想脱离文档流，就需要用到清除浮动了~

如何清除浮动？

  1. 添加额外的同级元素div使用clear:both
    原理：清除了元素附近所有的浮动。
    缺点：添加无意义标签

  2. 对父元素设置overflow:hidden
    原理：使用BFC原理，对子元素进行约束，根据BFC，盒子内部元素不影响外部布局
    缺点：overflow:hidden本身语义是超出部分隐藏，对于不确定父元素高度的情况，很难进行合适的布局。

以下方法推荐使用
3. 使用伪类进行清除浮动（分为普通浏览器和ie浏览器）

1
2
3
4
5
6
7
8
9
10
11
12
/*伪元素是行内元素 正常浏览器清除浮动*/
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
/*只有IE6-IE7执行，其他浏览器不执行*/
.clearfix{
    *zoom: 1;
}
  1. 双伪类清除浮动
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

相关知识：

BFC形成条件：（只要元素满足下面任一条件即可触发BFC特性）

  • body 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

相关问题

Q：如何解决margin坍塌？
A：
兄弟元素：
可以直接改变其中一个的外边距的值，使之达到想要的效果。(推荐使用)

BFC解决办法：将兄弟元素分别作为子元素放在块级元素内，然后将其父级元素的渲染规则该为BFC。(不推荐使用,会破坏HTML文档结构)

父子元素：
使用margin时，会出现另一个bug，这里称为margin塌陷（就是垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的）。
可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局)

使用BFC解决: 将父元素的渲染模式改为BFC渲染模式.

参考文章

清除浮动的最常用的四种方法，以及优缺点
如何解决margin塌陷以及margin合并
zoom:1的原理和作用