不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )

浮动(Float)是页面布局中经常用到的技巧,但是,同时也出现了很多由于浮动引发的问题;父元素不能闭合具有浮动属性的子元素,是这些问题中最常见且最让新手头痛的一个。

清除浮动常见的做法是加一个额外的标签,然后给这个标签加上 clear:both 的设置,追求完美的人当然不乐意这种方式,于是,便有了本文将要介绍的:不增加额外元素实现清除浮动的方法。

 
<style type="text/css">
 
/*
说明:不增加额外元素实现清除浮动( 闭合浮动元素 Clear Floats )
整理: CodeBit.cn ( http://www.CodeBit.cn )
*/
 
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
 
</style>

使用时,给需要清除浮动的元素增加一个 clearfix 的 class 即可。

自适应高度的两列页面布局(Two columns with colour)

在用DIV做页面布局时,很多人都遇到过“列”高度自适应的问题,这篇翻译自 Max Design 的教程,一步一步的带你实现高度和宽度自适应的两列布局,相信对初学者理解页面布局有很大好处。

如何用CSS设计高度自适应的两列布局?

本文将向你展示如何设计具有下列属性的简单的两列布局:

* 流动宽度(根据浏览器和视窗大小改变)(注:即自适应宽度)
* 最大宽度的 header 和 footer
* 两列可以有自己的颜色
* 两列可以自动伸展到最大高度,不论是哪一个更高

用背景图片创建带有颜色的做法,要求窄的列设置一个精确的宽度,这可能不符合你的特殊需求,但是,还有很多方法可以实现两列布局,在选择之前先看看哪个更符合你的需要。

文章内容:


第一步:初始化页面容器(containers)


让我们先创建5个简单的容器,并给他们唯一的ID:

 
<div id="container">
   <div id="banner">
   </div>
   <div id="nav">
   </div>
   <div id="content">
   </div>
   <div id="footer">
   </div>
</div>


第二步:放些内容


这一步我们在每个容器里放上具有代表性的内容,这样可以看到每个容器里面真实的文字效果,即使在初期阶段,给这些内容正确的语义也是非常重要的,这样可以用标准的 HTML 标签将每个内容包含起来,如果你有个标题,那就用标题的标签:<h1></h1>,如果是普通内容,每个段落就用<p></p>标签包含起来。

尽可能用类型选择器(type selectors)来设置HTML元素的样式,这样可以避免多余的 class 或者 ID。

 
<div id="container">
   <div id="banner">
      <h1>Site name</h1>
   </div>
   <div id="nav">
      <p>
         Lorem ipsum..
      </p>
   </div>
   <div id="content">
      <h2>
         Page heading
      </h2>
      <p>
         Ut wisi enim..
      </p>
   </div>
   <div id="footer">
      Footer stuff here
   </div>
</div>

自适应高度的两列页面布局(Two columns with colour) – 示例1


第三步:设置body的样式

3.1 外补丁(margin)和内补丁(padding)

一些浏览器会设置body的默认内补丁,还有一些设置默认内补丁,强制页面对齐视窗的左上角,可以将内外补丁都置为0。

 
body
{
margin: 0;
padding: 0;
}

3.2 字体

你可以设置整个页面的字体样式,但是要明白的是有些浏览器不能正确处理字体样式继承,这意味着你可能需要单独为table或者form设置字体样式。

设置一个字体队列是非常重要的,如果用户没有 Georgia 字体,他们可能有 Times 或者 Times New Roman 字体,如果都没有,那至少需要有 serif 或者其他类别的字体。

所有的字体用“,”分隔,如果字体名字有空格,就需要用引号(“”)包含。

 
body
{
margin: 0;
padding: 0;
font-family: georgia, times, "times new roman", serif;
}

3.3 字体

字符颜色和页面背景也可以放在 body 样式中。

 
body
{
margin: 0;
padding: 0;
color: #000;
background-color: #ddd;
}

自适应高度的两列页面布局(Two columns with colour) – 示例2


第四步:设置 container 的样式


一个成功的布局建立在 container 的基础上,我们为 container 设置一个左对齐的背景图片,并使其往下延伸,但不要超过页面,这个图片左列一样宽,这样看起来就像一个有颜色的列。

4.1 外补丁(margin)

我们要居中对齐名为 container 的容器,就需要将其两侧设置外补丁,我们可以用缩写的方式设置上、下外补丁为1em ,左右为5%。

 
#container
{
margin: 1em 5%;
}

4.2 加点颜色

将 container 设置一个不同于页面的颜色。

 
#container
{
margin: 1em 5%;
background-color: #FFF;
}

4.3 设置背景图片

为 container 设置一个宽为180象素的背景图片,这张背景图片将向下平铺到整个页面,可以将 background-repeat 设置为 y 轴平铺。

 
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
}

4.4 设置边框

如果你需要,可以给container加上边框样式。

 
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
}

自适应高度的两列页面布局(Two columns with colour) – 示例3


第五步:设置顶部横幅的样式

5.1 设置颜色

我们现在给 banner 容器加上背景颜色和底部边框样式。

 
#banner
{
background-color: #666;
border-bottom: 1px solid #333;
}

5.2 设置标题的内外补丁

我们需要给名为 banner 的 div 里面的标题(<h1>)设置样式,可以用包含选择器(descendant selector)来实现。

浏览器在显示标题的时候是有些不同的,Opera 和 Internet Explore 不能够正确处理 margin-top ,要在 DIV 里面正确安置标题,需要把 margin 设为 0 ,用 padding 来实现想要的效果,可以用缩写(shorthand declaration)的方式设置padding的值。

 
#banner h1
{
margin: 0;
padding: .5em;
}

自适应高度的两列页面布局(Two columns with colour) – 示例4


第六步:设置 nav 的样式

6.1 设置nav浮动

通过设置 “float: left” 可以让 nav 浮动到左侧,必须给一个浮动的元素设置宽度(除了一些有固定宽度的元素,如图片)。

 
#nav
{
float: left;
width: 160px;
}

6.2 设置外补丁(Margin)

设置左侧外补丁,可以使它不再紧贴着 container 的边。

 
#nav
{
float: left;
width: 160px;
margin-left: 10px;
}

6.3 设置内补丁(Padding)

设置上部内补丁,可以使它不再紧贴着 banner 的边。

 
#nav
{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}

6.4 Margin-top

一些浏览器不能正确处理设置了 margin-top 属性的容器里面的第一个元素,如果我们想所有元素都处在正确的位置,我们需要用包含选择器将容器里面段落的 margin-top 设置为 0。

 
#nav p
{
margin-top: 0;
}

自适应高度的两列页面布局(Two columns with colour) – 示例5


第七步:设置右侧内容的样式


名为 content 的 div 需要设置样式,以放置它流动到 nav 的下面,我们可以设置左侧外补丁来实现这个需求-要把值设的比 nav 的宽度大一点,left margin 是从边界测量,这样看起来就像是一个真实的列,尽管它的位置是静态设置的。

 
#content
{
padding-top: 1em;
margin: 0 2em 0 200px;
}

自适应高度的两列页面布局(Two columns with colour) – 示例6


第八步:设置底部内容的样式

8.1 clear: both

footer 需要设置 “clear: both” 来强制自己在任何元素的下面成为新的一行。

 
#footer
{
clear: both;
}

8.2 背景颜色

我们可以设置一个区别于其他容器的颜色。

 
#footer
{
clear: both;
background-color: #666;
}

8.3 Padding

内补丁可以使内容不再紧贴着容器的边。

 
#footer
{
clear: both;
background-color: #666;
padding: 1em;
}

8.4 文字对齐

通过设置 “text-align: right” 让文字右对齐。

 
#footer
{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
}

8.5 Border-top

可以通过缩写的方式设置上边框。

 
#footer
{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}

现在我们已经完成了这个简单的页面布局。

自适应高度的两列页面布局(Two columns with colour) – 示例7


最大宽度的样式


通过将 “margin: 1em 5%” 修改为 “margin: 0” 可以很容易的切换到最大宽度的样式。

 
#container
{
margin: 0; /* changed from 1em 5% */
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
}

自适应高度的两列页面布局(Two columns with colour) – 示例10


右侧导航的样式


通过修改 nav 为 float: right ,然后将背景图片右对齐,我们很容易的切换到右侧导航的样式。

 
#container
{
margin: 1em 5%;
background-color: #FFF;
background-image: url(background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
background-position: right; /* ADD THIS RULE */
}
 
#nav
{
float: right; /* WAS FLOAT LEFT */
width: 160px;
margin-right: 10px; /* WAS MARGIN-LEFT */
padding-top: 1em;
}
 
#content
{
padding-top: 1em;
margin: 0 200px 0 2em; /* SWAP ORDER */
}

自适应高度的两列页面布局(Two columns with colour) – 示例11


用border的方式区分列


如果你想在两列或三列布局中设置边框,你会发现边框只会延伸到content的高度,解决这个问题也可以用背景图片来让它看起来像边框。

自适应高度的两列页面布局(Two columns with colour) – 示例12

限于英文水平,文章仅为意译,英文原文地址:
http://www.maxdesign.com.au/presentation/two-columns/