CSS第四节

浮动

标准流

标准流就是浏览器默认布局的方式，也就是从上往下，从左向右的默认的排班布局的方式。

浮动的本质：就是解决图片和文字并排的格式问题。

元素浮动后，会脱离标准流，但是还会影响标准流的布局。

浮动的元素会不占据标准流的空间。但是会影响标准流中的文本的排版。

 

浮动的特性

1.浮动脱离标准流，不占位置，但会影响标准流。浮动只有左右浮动。

2. 浮动的元素A排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐；如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。

3.一个父盒子里面的子盒子，如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示。

4.浮动根据元素书写的位置来显示相应的浮动。

5. 元素添加浮动后，如果没有设置宽高的话，元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少。也就是具有了包裹性。

6.浮动具有破坏性，元素浮动后，破坏来原来的正常流布局，造成内容塌陷。

注意：

如果一个标准流的父盒子，没有设置高的情况下，所有的子盒子进行了浮动，那么父盒子的高度会塌陷成0.

 

解决浮动破坏性造成的高度塌陷的问题

第一种解决高度塌陷的方法就是使用overflow。

在父盒子上设置overflow： hidden；之后，父盒子具有的包裹性，就不会出现高度塌陷的问题了。

Overflow详解

当盒子内的元素超出盒子自身的大小时，内容就会溢出（IE6除外），这时如果想要规范溢出内容的显示方式，就需要使用CSS的overflow属性

属性 描述

visible 内容不会被修剪，会呈现在元素框之外（默认值）

hidden 溢出内容会被修剪，并且被修剪的内容是不可见的

auto 在需要时产生滚动条，即自适应所要显示的内容

scroll 溢出内容会被修剪，且浏览器会始终显示滚动条

 

补充：BFC

Overflow可以触发元素的BFC，可以让元素具有独立的排版的空间和权限，在bfc内部所有的元素都依据父元素进行排版和布局，所有父元素具有了包裹性，这就是解决高度塌陷问题的原理。

比如： 浮动也可以触发bfc，再有：定位、overflow、display：table、table-cell...

 

版心的概念

版心就是，网站的核心展示区域，一般居中显示。版心宽度一般是：

960px  980px  1000px  1190px

1200px

 

清除浮动

清除浮动，就是让当前元素左右两边都不存在浮动元素的时候才把元素放到标准流汇中显示。

Clear：left; 清除左浮动，

清除右浮动: clear:right;

清除左右浮动：clear:both;

常用的几种清除浮动的方法：

第一种：隔墙法。

第二种综合的clearfix的方法：使用overflow进行包裹所有的浮动子元素。有误伤。

Ckearfix的使用场景：

1、父盒子要把所有的子盒子包裹住。

2、父盒子是包裹正行的 div元素，需要前后进行清除浮动。

.clearfix {

display: table; /*  触发bfc，div具有的包裹性*/

}

 

.clearfix:before, .clearfix:after {

content: "";

display: block;

clear: both;

height: 0;

visibility: hidden;

}

 

.clearfix {

_zoom: 1;

}