让浮动元素父容器自适应高度的三种方法

2012-11-2更新

关于清除浮动,下面的方法虽然有效,但已经有些旧了,建议大家看这篇文章推荐的清除浮动的方法

Which method of 'clearfix' is best?

浮动元素由于脱离了文档流,无法撑起其父元素的高度,如果父元素要显示背景或边框时就不能置之不理了。使浮动元素的父容器自适应高度的方法有三种:

方法中使用到的css定义

<style type="text/css">

.fl { float: left }
.cb { clear: both }

什么是CSS reset

什么是CSS Reset。HTML标签在浏览器中都有默认的样式,例如p标签有上下边距,strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别,例如ul默认带有缩进样式,在IE下,它的缩进是由margin实现的,而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题,影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉,这就是CSS reset。

YUI为我们提供了一个很好的CSS reset,可以直接下载使用,这段代码很成熟,推荐大家使用。YUI的CSS reset主要做了下面几点:

HTML规范-Web前端开发修炼之道读书笔记

HTML规范

HTML规范包括以下内容:

1. DTD统一用<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

2. 统一UTF-8编码。

HTML、CSS、JavaScript缩进统一使用TAB键。

3. 标签名,属性名全部小写,属性需要加引号,单标签需闭合,例如<hr> V. <hr /> X.

4. HTML应在保证弹性的基础上尽量减少嵌套层数。

编写高质量代码-Web前端开发修炼之道-读书笔记

编写高质量代码-Web前端开发修炼之道-读书笔记

1. Web标准由一些列标准组合而成,其核心理念就是将网页的结构、样式和行为分离开来,所以它可以分为三大部分:结构标准、样式标准和行为标准。结构标准包括XML标准、XHTML标准、HTML标准;样式标准主要指CSS标准;行为标准主要包括DOM标准和ECMAScript标准。

2. 所谓高质量的代码,在Web标准的思想指导下,在实现结构、样式和行为分离的基础上,还要做到三点:精简、重用、有序