浅谈浮动-前端开发 浮动框架html代码

浮动对于大多数初学者来说都是一个不容忽视的难点，有些初学者光知道浮动而不知道浮动的真正意义。下面跟随源码时代Web前端学科老师看看到底是怎么回事。

浮动创建初衷

在浮动还没出现的时候，当时我们的网页排版还处于一个蛮荒的时代，整个网页中有一两张图片出现都很不错了，而且还是那种图片一行文字一行的排版，如下图：

如果你想布局成左边图片右边文字或者布局成我们平时做笔记的方式，这是候浮动就出现了。所以浮动创建的最初目的，就是为了解决文字环绕效果，听起来来有点抽象，那具体是什么呢。我们看看下面这张图：

究竟浮动后是怎样造成这种现象的呢，我们看看下面这两张图就知道了，如图下：

浮动最初创建的时候是为了解决文字环绕效果，而文字环绕效果会对父元素的高度造成破坏，从而塌陷。简而言之：浮动具有破坏性，导致父元素高度塌陷。而我们常常认为浮动造成父元素高度塌陷是一种bug，这里要告诉大家：这不是bug，而是标准。

浮动实际开发中的运用：

通常我们要么左浮动，要么右浮动

清除浮动：

我们通常都在说清除浮动，其实应该是清除浮动所带来的影响。

常见的清除浮动的三种方式：

1. 在紧接着浮动框的后面新建一个div然后引入样式clear:both

代码：

效果：

注意：在页面中增加冗余标签，违背了语义网的原则，对后期获取元素也增加了不必要的对象

2. 在父级元素中引入overflow:hidden,

这种方式有前提条件：

1) 必须所有的子元素都浮动

2) 父元素不设置高度

代码：

效果：

注意：一旦子元素的大小超过父容器的大小，就会出显示问题

3. 在父元素中使用:after伪选择符，就可以在父容器的尾部自动创建一个子元素

代码：

"content:"020";"是在父容器的结尾处放一个空白字符，

"height: 0;"是让这个这个空白字符不显示出来，

"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。

效果：

具体用哪种方式清除浮动所带来的影响根据情况而定。

感谢源码时代Web前端学科讲师提供此文章！

本文为原创文章，转载请注明出处（http://www.itsource.cn）！