CSS——知识点补充（四）元素的浮动属性

通过浮动可以使一个元素向其父元素的左侧或右侧移动，我们使用float属性来设置于元素的浮动

创新互联建站专注于桂林网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供桂林营销型网站建设，桂林网站制作、桂林网页设计、桂林网站官网定制、微信平台小程序开发服务，打造桂林网络公司原创品牌,更为您提供桂林网站排名全网营销落地服务。

注意,元素设置浮动以后，水平布局的等式便不需要强制成立 。元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动

（2）设置浮动以后元素会向父元素的左侧或右侧移动，

（3）浮动元素默认不会从父元素中移出

（4）浮动元素向左或向右移动时,不会超过它前边的其他浮动元素

（5）如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

（6）浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

实际上，浮动属性一开始创建出来的原因就是为了实现文字环绕的效果的，只是后来大家发现利用浮动可以很好地处理页面布局的问题，所以现在更多时候是利用它来做布局的功能。。。

我们知道，块元素和行内元素在文档流中都有着各自的布局特点，比如块元素独占一行等。那么如果脱离了文档流，块元素和行内元素分别会有什么样的影响呢？

1、块元素不在独占页面的一行

2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

1、行内元素脱高文档流以后会变成块元素，特点和块元素一样

也就是说，一旦脱离文档流以后，我们就不需要再区分块和行内了。

我们可以看一下下面的案例，在没有使用 clear 属性前，对于两个兄弟元素，如果前者设置为浮动，那么由于其脱离了文档流，那么后者就会移动到前者原先的位置上。如果我们不想元素受到其他元素的浮动影响，那么就可以通过设置 clear 属性来解决这个问题。

clear底层实现的原理是：设置清除浮动以后，浏览器会自动为元素添加一个margin，以使其位置不受其他元素的影响

我们可以看下面这个案例，父 div 元素中包含着一个设置为浮动的 div 子元素，由于子元素设置为浮动，脱离了文档流，且父元素中没有指定高度，所以此时一旦子元素脱离了文档流后，就缺少了支撑起父元素高度的元素。相比于这样的效果，我们更希望即使子元素设置为浮动，但父元素依然可以包裹住子元素（或者说是有着子元素的高度，不至于塌陷）。

BFC(Block Formatting Context)块级格式化环境

BFC是一个css中的一个隐含的属性， 当元素开启BFC后，该元素会变成一个独立的布局区域 。可以理解为，此时元素内的后代元素不会再把其他样式传递到外面了。

元素开启BFC后的特点;

1.开启BFC的元素不会被浮动元素所覆盖

2.开启BFC的元素子元素和父元素外边距不会重叠

3.开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC

1、设置元素的浮动（不推荐)

2、将元素设置为行内块元素(不推荐)

需要注意的是，虽然开启元素的BFC环境可以解决高度塌陷的问题，但是这还不是最完美的解决方案，在某些特殊的环境下还是会有问题。

我们回顾一下，高度塌陷产生的原因是什么？主要是因为父元素没有设置高度，所以父元素的高度由子元素的高度决定，一旦子元素设置为浮动后脱离了文档流，那么此时父元素就会由于没有子元素的支撑而塌陷。

那么如果我们能够实现，手动在浮动的子元素后面放入一个无内容的块元素，且清除其受到的 float 影响，那么此时这个块元素就会落在浮动的元素下方，又由于（自身没有设置高度的）父元素的高度由子元素的高度决定，所以此时父元素因为要包裹新增的无内容块元素，也就自然可以包裹浮动的元素了。

所谓的clearfix样式，其实核心就是在第二种解决方式的基础上，对样式做一个进一步的封装，使其既可以解决高度塌陷的问题，还可以解决父子元素外边距重叠的问题。

CSS三大核心-浮动

1、标准流——标签按照规定好默认方式排列

2、浮动

3、定位

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

float属性用于创建浮动框，将其移动到一边，直到左边或者右边边缘及包含块或另一个浮动框的边缘。

选择器:{ float:属性值}

1、 浮动的元素会脱离标准流（脱标），不再保留原来的位置

2、浮动的元素会一行内显示并且元素顶部对齐

3、浮动的元素会具有行内块元素的特性

1、为了约束浮动元素，一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动左右位置，符合网页布局第一准则。

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。浮动的盒子只会影响当前浮动盒子后面的标准流，不会影响前面的标准流

父级盒子不给高度，自己盒子会撑开父级盒子高度，但是加上浮动就会无效。

额外标签法也称为隔墙法，是W3C推荐的做法。会在浮动元素的末尾添加一个空的标签。例如：div style="chear:both"/div。新的标签必须是块级元素。

选择器:{ clear :属性值}

实际工作中几乎只用clear :both 。清除浮动的策略是闭合浮动，只让浮动在父级盒子内部影响。

可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。这个属性还用于外边距合并。   缺点就是无法显示溢出部分。

:after伪元素法相当于额外标签法的升级版，也是在浮动元素尾部添加空的块级元素，用法是给父元素添加属性。以下为固定格式。

类似于:after 伪元素法，只不过前后都会插入一个盒子，更符合闭合的概念。

css如何清除浮动？

css清除浮动可以理解为打破横向排列。 清除浮动的关键字是clear，官方定义如下： 语法： clear : none | left | right | both 取值： none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear）对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。具体做法：要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

css中什么是浮动

浮动 --

!-- 块元素在文档流中默认垂直排列

如果希望块元素在页面中水平排列

可以是其脱离文档流

使用float来使元素浮动，从而脱离文档流

可选值：

none:默认值，认在文档流中排列

left:像左浮动

right:向右浮动

元素浮动以后，会尽量向页面的左上和右上浮动，

知道遇到父元素的边框

**如果浮动元素上边是个没有浮动的

块元素，则浮动元素不会超过他

在CSS样式中有关 float 浮动嵌套 问题

浮动元素可以相互嵌套，嵌套规律与流动元素的嵌套相同。浮动的包含元素（父元素）总会自动调整自身的高度和宽度以实现对浮动元素的包含。

我们来看一个例子：

浏览器效果图：

这时会发现父元素会自动调整自身的大小来包含子元素。

如果包含元素定义了高度和宽度则他不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。注意，在IE6及更低版本浏览器中包含框仍然能够自动调整自身大小来适应子元素的显示大小，不过在IE7版本中微软纠正了这个不符合标准的显示方法。如下

示例：

浏览器效果图：

默认状态下溢出不隐藏，我们可以添加 样式 overflow:hidden; 隐藏多余的部分或overflow: scroll; 多余部分显示滚动条。

如果把浮动元素嵌入到流动元素之内，则父元素不能够自适应子元素的高度，

如下示例：

浏览器效果图：

在上图中可以看到包含元素div并，没用显示。原因就是包含元素没有适应子元素的高度，而是根据自身定义的属性以独立的形式显示（父元素没有被撑开，仅收缩成一条直线显示）。所以，在应用混合嵌套式，要预测到浮动与流动混合布局时会出现的各种怪现象，并积极做好兼容处理。

解决方法：可以在包含元素内的最后一行添加一个清除元素，强制撑开包含元素，使其包含浮动元素。

示例如下：

浏览器效果图：

本文章参考书籍：HTML5＋CSS3＋JavaScript从入门到精通（标准版）未来科技　编著

网页题目：css样式中的浮动,css中浮动的定义
分享路径：http://myzitong.com/article/dscdiod.html