浮动地运用以及清除浮动带来地影响.docxVIP

浮动的运用以及清除浮动带来的影响浮动对于大多数初学者来说都是一个不容忽视的难点，有些初学者光知道浮动而不知道浮动的真正意义。下面我们看看到底是怎么回事。1、浮动创建初衷在浮动还没出现的时候，当时我们的网页排版还处于一个蛮荒的时代，整个网页中有一两张图片出现都很不错了，而且还是那种图片一行文字一行的排版，如下图：如果你想布局成左边图片右边文字或者布局成我们平时做笔记的方式，这是候浮动就出现了。所以浮动创建的最初目的，就是为了解决文字环绕效果，听起来来有点抽象，那具体是什么呢。我们看看下面这张图：究竟浮动后是怎样造成这种现象的呢，我们看看下面这两张图就知道了，如图下：浮动最初创建的时候是为了解决文字环绕效果，而文字环绕效果会对父元素的高度造成破坏，从而塌陷。简而言之：浮动具有破坏性，导致父元素高度塌陷。而我们常常认为浮动造成父元素高度塌陷是一种bug，这里要告诉大家：这不是bug，而是标准。2、浮动实际开发中的运用：通常我们要么左浮动，要么右浮动3、清除浮动：我们通常都在说清除浮动，其实应该是清除浮动所带来的影响。常见的清除浮动的三种方式：1）在紧接着浮动框的后面新建一个div然后引入样式clear:both代码：效果：注意：在页面中增加冗余标签，违背了语义网的原则，对后期获取元素也增加了不必要的对象2）在父级元素中引入overflow:hidden,这种方式有前提条件：必须所有的子元