css布局之浮动.docxVIP

Div+CSS布局之浮动 在网页的Div+CSS布局中，常用的布局方式有文档流、浮动 、定位等等。浮动是最基本最常用的，它能够改变页面中对象的前后流动顺序。使对象脱离文档流的控制，让内容的排版变的简单，具有良好的伸缩性，从而实现标准流难以实现的布局方式。接下来我们学习浮动的相关知识。 浮动的语法： 浮动的语法非常的简单，浮动只有三个参数，如下： 语法： ?float : none | left |right ?参数： ?none : 　对象不浮动left : 　对象浮在左边right : 　对象浮在右边 了解了浮动的基本语法后，我们来观察下浮动后的对象有哪些特特点： （1）、浮动后的对象是脱离标准流的，并且浮动不在占有文档流中的位置。 Html中代码如下： body div class=oneone/div div class=twotwo/div /body 浮动前CSS代码如下： .one{ width:200px; height:200px; background:yellow; } .two{width:400px; height:100px; background:pink; } 效果如图： 文档流的排列方式 添加浮动后的CSS代码如下： .one{ width:200px; height:200px; background:yellow;float:left;} .two{width:400px; height:100px; background:pink; } 效果如图： 黄色div浮动后的效果 从上图中的效果对比可以看出，粉色的div盒子移动到了黄色div盒子的下面，这是因为黄色的div盒子浮动后，脱离原来文档流的控制，漂浮在了文档流的上方，不在占有文档刘流的位置，而粉色div依然按照文档流的布局，替补了黄色div空出来的位置。 （2）浮动后的盒子会被转换成行内块显示模式。 以下是块级元素的浮动前后的对比； html代码： body div img src=brand.jpg / /div /body 浮动前的CSS代码如下: div{border:1px red solid;} 效果图如下： 可见块级元素默认独占一行。 浮动后的CSS代码如下： div{border:1px red solid; float:left;} 效果图如下： 可见浮动后div盒子的宽度完全有内容的多少来决定。 那么接下来在看一下行内元素的浮动后的效果： html代码如下： body span我是span标签，我是行内元素/span /body 浮动后的CSS代码如下： span{width:300px; height:300px; background:pink;float:left;} 综合以上案例，由此可见，任何显示模式的元素浮动后，都是行内块的显示模式。 盒子浮动 跟 行内块元素的对比 浮动后的元素既然都是行内块元素，那么为什么不直接使用行内块块元，而要用浮动？浮动有哪些优势和好处呢？ 首先看下行内块的显示效果： html代码： body div class=oneone/div div class=twotwo/div div class=threethree/div div class=fourfour/div /body CSS样式代码： div{ width:200px; height:200px; display:inline-block; } .one{background:red;} .two{background:green;} .three{background:pink;} .four{background:blue;} 接下看下浮动后盒子们呈现的效果 html代码如下： body div class=oneone/div div class=twotwo/div div class=threethree/div div class=fourfour/div /body CSS代码如下： div{ width:200px; height:200px; } .one{background:red; float:left;} .two{background:green;float:left;} .three{background:pink;float:right;} .four{background:blue;float:right;} 效果图如下： 有上??对比可见： 行内块元之间默认有间距，并且难以去除这些边距，浮动的两个元素之间，没有任何