CSS 浮动的理解

@sakila1012 2018-02-05 11:35:32发表于 sakila1012/blog

写在最前

float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它。该元素从网页的正常流动中移除,尽管仍然保持部分的流动性。参考MDN

一个浮动元素是 float 的值不是 none 的元素。

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;//实验性API
float: inline-end;//实验性API

/* Global values */
float: inherit;
float: initial;
float: unset;

浮动相关知识

由于 float 意味着使用块布局,它在某些情况下修改 display 值的计算值:
|指定值|计算值|
|-----|---|
|inline|block|
|inline-block|block|
|inline-table|block|
|table-row|block|
|table-row-group|block|
|table-column|block|
|table-column-group|block|
|table-cell|block|
|table-caption|block|
|flex|block|
|inline-flex|block|

语法

float 属性的值被指定为单一的关键字,值从下面的值列表中选择。
left 表明元素必须浮动在其所在的块容器左侧的关键字
right 表明元素必须浮动其所在的块容器右侧的关键字
none 表明元素不进行浮动的关键字

浮动特性

浮动元素从普通文档流中脱离,但浮动元素影响的不仅是自己,它会影响周围的元素的元素对齐进行环绕。
不管一个元素是行内元素还是块级元素,如果被设置了浮动,那浮动元素会生成一个块级框,可以设置它的width和height,因此float常常用于制作横向配列的菜单,可以设置大小并且横向排列。

浮动元素的展示在不同的情况会有不同的规则

  • 浮动元素在浮动的时候,其margin不会超过包含块的padding。PS:如果想要元素超出,可以设置margin属性
  • 如果两个元素一个向左浮动,一个向右浮动,左浮动元素的marginRight不会和右浮动元素的marginLeft相邻
  • 如果有多个浮动元素,浮动元素会按顺序排下来而不会发生重叠的现象
  • 如果有多个浮动的元素,后面的元素高度不会超过前面的元素,并且不会超过包含块。
  • 如果有非浮动的元素和浮动元素同时存在,并且非浮动元素在前,则浮动元素不会高于非浮动元素
  • 浮动元素会尽快向顶端对齐、向左或向右对齐

重叠问题

  • 行内元素与浮动元素发生重叠,其边框,背景和内容都会显示在浮动元素之上
  • 块级元素与浮动元素发生重叠时,边框和背景会显示在浮动元素之下,内容会显示在浮动元素之上

clear 属性

clear属性:确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。取值:left、right、both。

父元素高度塌陷问题

为什么要清除浮动,父元素高度塌陷 解决父元素高度塌陷问题:一个块级元素如果没有设置height,其height是由子元素撑开的。对子元素使用了浮动后,子元素会脱离标准文档流,也就是说,父级元素中没有内容可以撑开其高度,这样父级元素的height就被忽略了,这就是所谓的高度塌陷。

清除浮动的方法

1:给父级div定义 高度 原理:给父级DIV定义固定高度(height),能解决父级DIV无法获取高度的问题。优点:代码简洁。缺点:高度被固定死了,是适合内容固定不变的模块。(不推荐使用)
2: 使用空元素,如<div class="clear"></div> (.clear{clear:both}) 原理:添加一对空的DIV 标签,利用css的clear:both属性清除浮动,让父级DIV能够获取高度。优点:浏览器支持好。缺点:多出了很多空的DIV标签,如果页面中浮动模块多的话,就出现很多空置DIV了,这样感觉似乎不太令人满意(不推荐使用)
3: 让父级div也一并浮起来 这样做可以初步解决当前的浮动问题。但是也让父级浮动起来了,又会产生新的浮动问题。(不推荐使用)
4: 父级 DIV 定义 display:table 原理:将 div 属性强制变成表格 优点: 不解 缺点:会产生新的未知问题。(不推荐使用)
5: 父级元素设置 overflow:hidden、auto;原理:这个方法的关键在于触发了BFC。在IE6中还需要触发hasLayout(zoom:1)优点:代码简洁,不存在结构和语义化的问题。缺点无法显示需要溢出的元素(不太推荐使用)
6: 父级div定义 伪类:after和zoom

.clearfix:after{
    content:'.';
    display:block;
    height:0;
    clear:both;
    visibility: hidden;
}
.clearfix {zoom:1;}

原理:IE8以上和非IE浏览器才支持:after,原理和方法2类似,zoom(IE专有的特性)可解决ie6,ie7浮动问题。优点:结构和语义化完全正确,代码量也适中,可重复利用率(建议定义公共类)缺点:代码不是非常简洁(极力推荐使用)

精益求精写法

.clearfix:after {
    content:”\200B”; 
    display:block; 
    height:0; 
    clear:both;
 }
.clearfix { *zoom:1; } 照顾IE6,IE7就可以了

参考资料

CSS