Web前端知识点-认识浮动及清除浮动带来影响的简单方法

本文从一个简单的HTML页面入手，对为什么要有浮动，如何设置浮动，元素设置浮动后自身的变化及对整个布局产生的影响，以及如何消除浮动带来的影响都做了详细的过程解析，理解浮动对页面布局来说很重要，希望本文能有所帮助！

一、认识浮动

普通标准文档流中，浏览器从HTML文件的最上面开始，从上至下，从左至右，逐个显示每个元素，每个元素在HTML文档中的位置就限制了他在页面中的位置。

先看一个简单的HTML

以上HTML由三大部分组成：div#header、div#main、div#footer，其中div#main又由两小部分组成：div#content和div#sidebar

浏览器从上到下依次渲染，如下

上面就是标准的文档流，各个元素在页面中的位置和顺序由元素在HTML中的位置和顺序决定

如果想形成丰富的页面效果，让元素能够按照我们指定的位置摆放，就需要用到浮动属性float了，让元素"浮"起来，"动"起来。

比如这里想让div#main中的子元素div#sidebar以侧边栏的形式显示在div#main的右侧，并和div#content左右分离，以两栏显示。

接下来，我们一步一步解析如何实现：

浮动就是指将元素脱离文档流向左或向右布局，使用float属性来设置，有三个取值：none（不浮动）、left（向左浮动）、right（向右浮动）

这里对div#sidebar设置float属性，取值right，加载如下

前后对比，有两个明显的不同

一是div#sidebar原来是占满整个浏览器宽度的，浮动之后，宽度自动变成内容的宽度；

二是元素设置浮动之后，会脱离标准流，浮在页面上，后面的元素div#footer上移，父元素div#main高度收缩，如果父元素中只有div#sidebar这一个元素，设置浮动之后父元素塌陷情况会更严重

这里需要注意的一点是，由于div#sidebar元素在div#container的后面，虽然设置了浮动，浏览器也是从上到下依次解析，先解析div#content，后解析div#sidebar，将它从标准流删除，浮动到div#content下方的最右侧。所以这里要实现两边栏的效果，需要先对调div#sidebar和div#content在HTML中的位置，此时再加载

我们看到div#sidebar如预期的那样出现在了div#content的右边，但是由于脱离标准流浮动在页面上，div#main和div#footer右边的部分区域被浮在上面的元素盖住了，虽然div#container中的内容碰到浮动元素的边缘就会换行，自动绕流，但是背景色和背景图片还是会被盖住，整个页面结构不够清晰。

我们期望的效果是：

1、视觉上div#sidebar好像包含在父盒子中，整个父盒子高度能自适应。div#sidebar和div#footer上下分离，不能发生重合

2、视觉上div#content和div#sidebar在div#main中左右分离

为了达到以上效果，就需要清除浮动带来的影响

二、清除浮动带来的影响

浮动引起的主要问题之一是元素设置浮动之后，脱离标准流，不再占用原来的空间，导致父元素塌陷。所以可以直接为父元素设置一个高度，视觉上看起来包裹所有的子元素，包括已脱离标准流的浮动元素。

方法一：给父元素设置一个高度

分析：在知道子元素高度的前提下，设置高度能直接的达到目的。但如果父元素中的子元素个数不固定，高度不固定呢？如果指定一个高度，父元素的高度就不能随着子元素个数和高度的变化而变化了，限制了整个自适应布局。

要想清除浮动带来的影响，又不破坏父元素的高度自适应，就需要借助一个新属性clear。

方法二：使用clear属性

clear属性用于设置元素哪一侧不允许有浮动元素，有四种取值

具体实现：

在父元素div#main的所有子元素的后面添加一个专门用来清除浮动的子元素div.clear，并设置div.clear的clear属性为right（因为此处只需要清除右侧的浮动）

因为div.clear的作用只是用来清除浮动，所以内容为""空，另外本案例为了观察更明确，给所有div设置了边框，这里设置div.clear的border-width为0px，覆盖原来的border属性。

代码做修改后，看一下效果

现在div#footer和div#sidebar上下成功分离，div#sidebar和div#content好像也撑起了盒子（本质上div#sidebar还是浮动在页面上的），但是div#content和div#sidebar还是没有做到左右视觉上的分离，因为div#content为了实现自适应布局，此处没有指定宽度，默认占据整个父元素的宽度，而div#sidebar是脱离标准流的，自然会重合。

这里可通过设置div#content的margin-right属性来巧妙的实现左右视觉上分离。

具体实现：

先为div#sidebar指定一个width，这里设置为120px，再设置div#content的margin-right为150px，目的就是为了通过div#content的右外边距控制和div#sidebar之间的距离，外边距只要大于浮动元素的宽度即可。效果如下

为了验证实现自适应布局的效果，我们手动改变浏览器的宽度，如下

以上通过浮动属性，clear属性及margin属性的综合运用，把一个自上而下的标准流的布局变成了页面布局更清晰的分栏布局，同时也是自适应的页面布局，随着浏览器的伸缩不会破坏整个布局。

修改后的完整代码

当然清除浮动还有别的方式，这里暂时先做以上讨论。

注：以上布局主要是为了说明浮动的"浮"和"动"特性,其他方面先不做考虑。如有疏漏之处，欢迎指正，我们一起成长快乐。

软件开发

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。