文档章节

css之float和clear

亭芳
 亭芳
发布于 2014/04/13 14:24
字数 1375
阅读 184
收藏 0

浮动元素

    浮动元素位于“文档流”外部,因而它不包含在标记中的父元素之内。那么什么时候我们需要用到浮动元素呢?举个最简单的例子,例如有些blog,有header,section, footer,其中section三栏布局,左侧是博文分类,中间是博文列表,右侧是一些信息。首先我们可以写出它的结构

<body>
    <header>头部</header>
    <section>
	<aside>左侧</aside>
	<iframe>内容</iframe>
	<aside>右侧</aside>
    </section>
    <footer>底部</footer>
</body>

现在我们看到的是常规文档流,即块级元素包围着所有子元素,而且在页面中自上而下相互堆叠在一起。这时我们为了达到三栏布局,最简单的方式就是运用浮动。

*{ margin:0; padding:0;}
header {background:rgb(204,255,204);}
section{background:yellow;}
aside{border:1px solid navy;width:100px;height:600px;background:pink;}
aside:nth-of-type(1) {float:left;}
aside:nth-of-type(2) {float:right;}iframe{background:blue;}
footer{background:red;}

上面的图就是实现效果。从图中可以看出,aside与iframe倒是并列布局,但是其父元素<section>也不再包围浮动元素,只包围非浮动元素,所以footer给提上来了,这个肯定不满足我们的要求。为了使得footer位于aside以下,我们有三种解决方案:

第一种:为父元素应用overflow:hidden,以强制它包围浮动元素。在此例子中,把overflow:hidden应用到section中,会发现footer回到我们期望的位置了。Tips:

overflow:hidden声明的真正用途是防止包含元素被超大内容撑大。应用该声明之后,包含元素仍然保持其设定的高度和宽度,而超大的子内容则会被容器剪切掉。除此之外,overflow:hidden还有另一个作用,就是它能可靠地迫使父元素包含其浮动的子元素。

第二种:同时浮动父元素。在section中添加float:left;width:100%;。其实现效果如下图所示:

浮动父元素之后,不管其子元素是否浮动,它都会紧紧包裹住它的子元素。因此需要用width:100%再让section与浏览器容器等宽。另外,由于section现在也浮动了,所以footer会努力往上挤到它旁边去。为了强制footer依然呆在section下方,要给它应用clear:left。被清除的元素不会向上浮动,不让它超过浮动元素的下方边界。

第三种:添加非浮动的清除元素

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

<body>
		<header>头部</header>
		<section>
			<aside>左侧</aside>
			<iframe>内容</iframe>
			<aside>右侧</aside>
			<div class="clear"></div>
		</section>
		<footer>底部</footer>
	</body>

在css中添加

div.clear{clear:right;}

由于div没有默认样式,不会引入多余空间,所以div很适合这个目的。第二种,如果不想加入表现性的div,则给section添加一个class。

<body>
		<header>头部</header>
		<section class="clearfix">
			<aside>左侧</aside>
			<iframe>内容</iframe>
			<aside>右侧</aside>
		</section>
		<footer>底部</footer>
	</body>

header {background:rgb(204,255,204);}
section{background:yellow;}
aside{border:1px solid navy;width:100px;height:600px;background:pink;}
aside:nth-of-type(1) {float:left;}
aside:nth-of-type(2) {float:right;}
iframe{background:blue;}
footer{background:red;}
section.clearfix:after{content:'.';display:block;height:0;visibility:hidden;clear:both;}

这个规则它只添加了一个清除的包含句点作为非浮动元素(必须得有内容,而句点是最小的内容)。规则中的其他声明是为了确保这个伪元素没有高度,而且在页面上不可见。使用clear:both意味着section中新增的子元素会清除左右浮动元素(位于左、右浮动元素下方)。

ok,以上我们介绍了强迫父元素包围其浮动子元素的三种方式,分别是:给父元素添加overflow:hidden声明、浮动父元素、在父元素内容的末尾添加非浮动元素,可以直接在html中添加,也可以通过给父元素添加类,然后利用clearfix规则。

当然,这三种方法要因地制宜。比如,不能在下拉菜单的顶级元素上应用overflow:hidden,否则作为其子元素的下拉菜单就不会显示了,因为下拉菜单会显示在父元素区域的外部,而这恰恰是overflow:hidden所要阻止的。再比如不能对已经靠自动外边距居中的元素使用“浮动父元素”技术,否则它不会居中。

没有父元素如何清除

有时候,在清除某些浮动元素时,不一定正好有那么个父元素可以作为容器来强行包围它们。此时,最简单的方法就是给一个浮动元素应用clear:both,强迫它定位在前一个浮动元素的下方。然而,在空间足以容纳多个元素向上浮动时,这个方法未必有效。

关于三栏布局,建议看《css权威指南》第五章。




© 著作权归作者所有

共有 人打赏支持
亭芳
粉丝 5
博文 24
码字总数 11767
作品 0
海淀
私信 提问
CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物
2016/04/07
38
0
CSS Float(浮动)

什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往是用于图像,但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动意味着元素只...

wybo521
2016/01/17
21
0
css float浮动详解

css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,...

月心寒
2016/11/19
7
0
div+css布局之float与clear的用法

CSS Float Layout Basics - CSS浮动布局基础:基于浮动的布局利用了float(浮动)属性来并排定位元素,并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果,例如环绕在照片周围,...

oecp
2011/06/10
0
1
Div+Css布局教程(-)CSS必备知识

目录: 1、Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解。 一、CSS布局属性 Width:设置对象的宽度(width:45px)。 Height:设置对象的高度(Height:45px;)。 Back...

城固如春
2016/11/12
3
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 比较大小

通过BigDecimal的compareTo方法来进行比较。 返回的结果是int类型: -1表示小于,0是等于,1是大于

嘴角轻扬30
1分钟前
0
0
PHP实现excel导出

1:前端代码 <div id=‘export’>导出excel表单</div> // //导入excel文件 $("#export").on('click', function(){ $.ajax({ url:"importexcel.php", type:'POST', dataType:'json', data:{}......

葬-花
3分钟前
0
0
内存性能的正确解读

一台服务器,不管是物理机还是虚拟机,必不可少的就是内存,内存的性能又是如何来衡量呢。 1. 内存与缓存 现在比较新的CPU一般都有三级缓存,L1 Cache(32KB-256KB),L2 Cache(128KB-2MB)...

阿里云官方博客
5分钟前
0
0
《边缘云计算技术及标准化白皮书》

12月12日,第八届中国云计算标准和应用大会在北京隆重召开,工业和信息化部党组成员,总工程师张峰先生,中国工程院副院长陈左宁女士,中国工程院院士沈昌祥先生,中国电子技术标准化研究院院...

阿里云云栖社区
5分钟前
0
0
iOS 官方文档

https://developer.apple.com/library/prerelease/content/navigation/#section=Platforms&topic=iOS...

walking_yxf
19分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部