浮动的运用以及清除浮动带来的影响

《浮动的运用以及清除浮动带来的影响》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、让每一名学员高薪就业www.itsource.cn浮动的运用以及清除浮动带来的影响浮动对于大多数初学者来说都是一个不容忽视的难点，有些初学者光知道浮动而不知道浮动的真正意义。下面我们看看到底是怎么回事。1、浮动创建初衷在浮动还没出现的时候，当时我们的网页排版还处于一个蛮荒的时代，整个网页中有一两张图片出现都很不错了，而且还是那种图片一行文字一行的排版，如下图：如果你想布局成左边图片右边文字或者布局成我们平时做笔记的方式，这是候浮动就出现了。所以浮动创建的最初目的，就是为了解决文字环绕效果，听起来来有点抽象，那具体是什么呢。我们看看下面这张图：让每一名学员高薪就业www.itsource.c

2、n究竟浮动后是怎样造成这种现象的呢，我们看看下面这两张图就知道了，如图下：让每一名学员高薪就业www.itsource.cn浮动最初创建的时候是为了解决文字环绕效果，而文字环绕效果会对父元素的高度造成破坏，从而塌陷。简而言之：浮动具有破坏性，导致父元素高度塌陷。而我们常常认为浮动造成父元素高度塌陷是一种bug，这里要告诉大家：这不是bug，而是标准。2、浮动实际开发中的运用：通常我们要么左浮动，要么右浮动让每一名学员高薪就业www.itsource.cn让每一名学员高薪就业www.itsource.cn3、清除浮动：我们通常都在说清除浮动，其实应该是清除浮动所带来的影响。常见的清除浮动的三

3、种方式：1）在紧接着浮动框的后面新建一个div然后引入样式clear:both代码：效果：让每一名学员高薪就业www.itsource.cn注意：在页面中增加冗余标签，违背了语义网的原则，对后期获取元素也增加了不必要的对象2）在父级元素中引入overflow:hidden,这种方式有前提条件：必须所有的子元素都浮动父元素不设置高度代码：效果：让每一名学员高薪就业www.itsource.cn注意：一旦子元素的大小超过父容器的大小，就会出显示问题3）在父元素中使用:after伪选择符，就可以在父容器的尾部自动创建一个子元素代码："content:"020";"是在父容器的结尾处放一个空白字符

4、，"height:0;"是让这个这个空白字符不显示出来，"display:block;clear:both;"是确保这个空白字符是非浮动的独立区块。效果：让每一名学员高薪就业www.itsource.cn具体用哪种方式清除浮动所带来的影响根据情况而定。