深入理解CSS网页布局-理论篇_html/css_WEB-ITnose

在css网页开发布局中，需要对浮动和定位有深刻的理解才能在开发中游刃有余。

基于此，在博客园中做了本篇总结，这些总结来自实践经验和阅读一些书籍后的理解总结，主要内容为浮动，清除浮动，定位。

（可点击屏幕左边的目录查阅）

一. float属性深入理解

首先简单布局一下，代码如下：

    #bigBox {    border: 2px solid Gray;    width: 500px;    height: 400px;    margin: 100px auto;}#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;}#box3{    background: pink;    width: 140px;    height: 100px;}
    
1
    
2
    
3

登录后复制

效果图：

立即学习“前端免费学习笔记（深入）”；

图p1

1. 脱离文档流

脱离文档流，即在元素原来的位置中脱离出来，可以理解为漂浮起来，但是要注意一些细节。

细节一

若浮动元素后面有不浮动的元素，那么其后面不浮动的元素会把浮动元素视为消失，然后顶到它的位置中。

我们来测试一下：对第二个div（id=box2）设置浮动，观察第三个div的位置

#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float:left;/*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;}

登录后复制

效果图：

立即学习“前端免费学习笔记（深入）”；

图p2

我们可以看到第三个div顶到浮动div原来的位置上去了，这里的float：left 设置为right，也同样，即第二个div消失了，后面的顶上去。

效果图：

立即学习“前端免费学习笔记（深入）”；

 图p3

 

细节二

我们不能理解为设置float之后，这个元素就完全漂浮在没有设置float元素的上面，虽然在细节一中的效果图中看是漂浮在上面（2在3的上面）。这个细节就是浮动只对后面的元素造成影响（所谓影响，就是后面的元素把它视为消失），对于排在它前面的同级块元素，不会对其位置造成影响。（即如果前面的同级块元素没有设置浮动，那么它也不会漂浮到这个元素的上面）。细节一的p1例子已经验证了这一特性（2还是在1的下面）。

那么，对于排在前面的同级内联元素呢？对于同级内联元素，设置了float属性的元素与前面的内联元素属于同一层面，而且优先级高于前面的同级内联元素，这里的优先级指位置优先级，比如float：left，那么前面的内联元素如果原来占据最左边，那么它由于优先级低于浮动元素，所以它就会让位与浮动元素，排在浮动元素的右边。

我们来看一下测试代码（重点查看注释的测试内容）：

#box1{    background: yellow;    width: 100px;    height: 100px;    display: inline-block; /*测试内容*/}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float:left;  /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;}

登录后复制

效果图：

立即学习“前端免费学习笔记（深入）”；

图p4

分析：对于1（这里用数字代表相应的div，上下同）来说，由于排在浮动的2的前面，所以它无论是否为块元素，都和2属于同一层面，再由于它不是块元素，所以它的位置优先级别低于2，由于2的float：left，向左浮动，所以它靠最左，1被挤到它的右边。对于3来说，2由于是浮动，所以视为消失了，但是由于3是块元素，所以独占一行，于是就有了上面的效果。

 

细节三

 文字永远会被挤出。我们把1,2设置浮动，把3注释，然后添加p标签。查看一下情况：

    
1
    
2
    <!-- 
3
 -->    
HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! HelloWorld! 10个HelloWorld！

登录后复制

图p5

实际上，并不是P元素和1，2浮动元素并列排在了一起，在细节一二中，我们知道p元素一定是顶到1的位置中的，但是由于文字永远是被挤出来的，所以他们被挤到2的左边，此时实现了一个文字环绕效果。我们可以给P元素添加背景色来查看一下实际：

p {    background-color: red;}

登录后复制

 图p6

 

2. 没有固定尺寸的父级元素无法自适应浮动的子元素（所有子元素都为浮动）

同样的，父元素属于文档流，如果子元素中有设置浮动的，那么也视为消失，所以父元素不会包裹它，如果全部子元素都为浮动，那么相当于这个父元素里面没有子元素，此时的表现和子元素为空一样。

我们先来看一下，在没有浮动元素的文档流中的情况：

代码：

body {    margin: 0 300px;}#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*//*测试内容：这里要设置去掉宽高*/    margin: 100px auto;}#box1{    background: yellow;    width: 100px;    height: 100px;}#box2{    background: SkyBlue;    width: 120px;    height: 100px;}#box3{    background: pink;    width: 140px;    height: 100px;}

登录后复制

    
1
    
2
    
3

登录后复制

效果图：

立即学习“前端免费学习笔记（深入）”；

图p7

这里的div（id=bigBox，1,2,3的父级元素）没有设置宽高，所以自动支撑起了子元素的宽高，由于1,2,3都是块元素，所以独占一行，宽度自动适应为body的宽度，所以如效果图所示，这是没有设置浮动的情况。

我们把2设置为浮动，查看一下效果：

#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left; /*测试内容*/}

登录后复制

效果图：

立即学习“前端免费学习笔记（深入）”；

图p8

父元素还是可以适应，不过视2为消失。

下面我们把全部子元素都设置为浮动，查看一下效果：

body {    margin: 0 300px;}#bigBox {    border: 2px solid Gray;/*    width: 500px;    height: 400px;*/    margin: 100px auto;}#box1{    background: yellow;    width: 100px;    height: 100px;    float: left; /*测试内容*/}#box2{    background: SkyBlue;    width: 120px;    height: 100px;    float: left; /*测试内容*/}#box3{    background: pink;    width: 140px;    height: 100px;    float:left; /*测试内容*/}

登录后复制

图p9

 

我们把1,2,3去掉，查看没有子元素的父元素的效果图，然后对比一下：

  <!--   
1
    
2
    
3
 -->

登录后复制