关于Float

Float

css设计float属性的主要目的,本来是为了实现文本绕排图片的效果。然而这个属性居然也成了创建多栏布局最简单的方式。

  1. 文本绕排图片
1
2
3
4
5
body>
    <img src="i/pic01.jpg" alt="ok">
    <p>注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字注意这段文字</p>
    
</body>

效果如图:

关于Float

我们可以看到由于p是块级元素,所以p排在了图片的下方。

Ok,现在让图片浮动起来 。

img{
float:left;
}

关于Float

我们可以发现会让图片浮动到左侧,从而让文本绕排到右侧。

说得形象一点,在你浮动一张图片或者其他元素时,你是要求浏览器把它往上方推,直到它碰到父元素的内边界。这个内边界很关键。假如我们再设置

p{
margin-top:100px;
}

效果如图 :

关于Float

这时。p的margin就决定其父元素的内边界。

言归正传,那么为什么p会围绕着Img呢? 这是因为后面的段落不再认为浮动元素在文档流中位于它的前面了,因而它会占据父元素内边界内左上角的位置,不过,它的内容会绕开浮动的图片

关于Float

大家看上图,我用Outline插件用黑色边框描绘了p的区域可以看到 Img元素其实已经脱离了文档流,但是还得给img留一个位子,这就好像人挂了,得有个墓碑一样。-*-。

注意:浮动非图片时,必须给它设定宽度,否则后果难以预料。图片无所谓没因为它本身有默认的宽度。

                 2.创建分栏

在此创建分栏,只要再用一次float属性。注意,给P要设置宽度哦~

 

1
2
3
4
5
6
7
8
9
10
11
12
*{margin:0;padding: 0;}
p{
    float:left;
    width:200px;
}
img{
    float:left;
    margin:0 4px 4px 0;
}
   

效果如图:

关于Float

浮动图片旁边的固定宽度段落一经浮动,就会变成布局中的一栏,其文本也不会再绕排图片了。同理接下来你也可以创建多栏布局了。

围住浮动元素的三种方法

我们首先要从一张带标题的图片开始。图片和标签包含在一个section元素中,而section元素后面跟着一个footer元素。可以把这个footer元素想象成很多网站底部的页脚。

html:

 

1
2
3
4
5
6
7
8
<body>
    <section>
        <img src="i/pic01.jpg" alt="ok">
        <p> 我想让这段文字在图片的右侧</p>
    </section>
    <footer> 这段文字是页脚,我不想让这段文字在图片的右侧</footer>
</body>
   

简单设置一下格式section为蓝色的边框,footer为红色边框。
css:

1
2
3
4
5
6
7
8
9
10
11
*{margin:0;padding0;}
section{
    border:1px solid blue;
    margin:0 0 10px 0;
}
p{
    margin:0;
}
footer{
    border:1px solid red
}

效果如图:

关于Float

这是常规的文档流,现在我们假如想让p在图片右侧。而不是现在的在下方 。那么用浮动就是:

img{
float:left;
}

如图:

关于Float

ok,浮动后蓝色框框跑到了右边。但父元素section也收缩到只包含文本的高度

为什么会出现这种情况呢 ?还是我们之前说的。img浮动后。脱离文档流。后面的元素要包围浮动的元素。

Ok,我们现在想让页脚在下方。解决方法有三种:

方法一:为父元素添加overflow:hidden;

section{
border:1px solid blue;
margin:0 0 10px 0;
overflow:hidden;

}

效果如下图:

关于Float

实际上,overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。除此之外,还有一个作用就是,它能可靠地迫使父元素包含其浮动的子元素。 

它能可靠地迫使父元素包含其浮动的子元素。 

它能可靠地迫使父元素包含其浮动的子元素。

它能可靠地迫使父元素包含其浮动的子元素。 

 

这句话非常重要 。由于父元素包含了section。且footer也是块级元素,所以footer在下方。

方法二:同时浮动父元素

第二种促使父元素包围齐浮动子元素的方法,是也让父元素浮动起来 。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
*{margin:0;padding0;}
section{
    border:1px solid blue;
    margin:0 0 10px 0;
    float:left;
    width:100%;
}
p{
    margin:0;
}
footer{
    border:1px solid red
    clear:both;
}
img{
    float:left;
}

浮动section以后,不管其子元素是否浮动,它都会紧紧的包围它的子元素。因此,需要用width:100%再让section与浏览器容器同宽。另外由于section现在也浮动了,所以footer会努力往上挤到它旁边去。为了强制footer依然待在section下方,要给它用clear:left。
效果跟刚才的图一样.

方法三:添加非浮动的清除元素

第三种强制父元素包含其浮动子元素的方法,就是给父元素的最后添加一个非浮动的子元素,然后清除该子元素(clear:both)。由于包含元素一定会包围非浮动的子元素,而且清除会让这个子元素位于浮动元素的下方,因此包含元素一定会包含这个子元素以及前面的浮动元素 。在包含元素最后添加子元素作为清除元素的方式有俩种。

第一种方式不太理想,也就是简单地在html标记中添加一个子元素,并给它应用clear属性。

 

 

1
2
3
4
5
6
7
8
<body>
    <section>
        <img src="i/pic01.jpg" alt="ok">
        <p> 我想让这段文字在图片的右侧</p>
        <div class="clear_me"></div>
    </section>
    <footer> 这段文字是页脚,我不想让这段文字在图片的右侧</footer>
</body>

上面section最后一个元素div就是我们刚才添加的空元素。

然后

.clear_me{clear:left;}

这样浮动元素就被父元素包围了。

很多人不喜欢用这种表现性元素。那么也可以用存CSS来添加这个清除元素的方法。首先要给section添加一个类。

 

1
2
3
4
5
6
7
<body>
    <section class="clearfix">
        <img src="i/pic01.jpg" alt="ok">
        <p> 我想让这段文字在图片的右侧</p>
    </section>
    <footer> 这段文字是页脚,我不想让这段文字在图片的右侧</footer>
</body>

然后再使用这个神奇的clearfix规则。

 

1
2
3
4
5
6
7
.clearfix:after{
    content:".";
    display:block;
    height:0;
    visibilityhidden;
    clear:both;
}

它只添加了一个清除包含句点作为非浮动元素(必须有内容,而句点是最小的内容)因为after会在元素内容后面而不是元素后面插入一个伪元素。规则中的其他的声明是为了确保这个“.”没有高度且在页面上不可见。
注意:1.不能在下拉菜单的顶级元素上应用overfolw:hidden,否则作为其子元素的下拉菜单就不会显示了。因为下拉菜单会显示在其父元素的外部。而这恰恰是overflow要阻止的。
2.不要对已经靠自动外边距居中的元素使用浮动父元素技术,否则它就不会再居中,而是根据浮动值到左边或右边了。

 

虚拟主机
《你不知道的Javascript(上卷)》PDF
《JavaScript设计模式与开发实践 》PDF
【深入浅出Node.js】PDF
《HTML5从入门到精通》PDF
广告也精彩