什么是盒子模型？

HTML的元素现实模型被称为盒子模型，任何一个在页面上显示的元素都会呈现为一个盒子形状。

盒子模型图解

盒子模型的的最内部分是实际的内容，直接包围内容的是内边距(padding)。 内边距的边缘是边框(border)。边框以外是外边距(margin)，内边距默认是透明的，因此不会遮挡其后的任何元素,包括元素的背景。

注意：背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

*{
    margin:0;
    padding:0;
}

以边框为界，里面的叫内边距，外面的叫外边距。
提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

我们设置的宽高（width, height）属性，只是在设置内容部分的宽高。（IE5，6不是这样的，好在我们现在不用考虑他们了）

一个盒子的总宽 = width + padding-left + padding-right + border-left + border-right

高度也是类似，当然实际显示的时候你还得考虑margin，但是有些浏览器里margin是会叠加的，所以还要根据上下文来考虑。

页面布局：

• 布局定位：
  • 属性：布局定位最重要的四个css属性是float, clear, position和display。 再配上我们前面学会的盒子模型的几个属性width, height, padding, margin, border。
    • float属性：
      float有三个值：

      float:right/left/none
      

      我们把每一个元素想象成浮在水面上的冰块，用float来控制他们靠左还是靠右。让他们靠左他们就会靠到盒子的最左边了，靠右也是一样。当我们面对下面的HTML：

<section>    
    ![](img/picture2.png)    
    <p>西湖，位于中华人民共和国浙江省杭州市区西面，是中国大陆首批国家重点风景名胜区和中国十大风景名胜之一。中国大陆主要的观赏性淡水湖泊之一。        西湖东靠杭州市区，其余三面环山，面积约6.39平方千米[1]，南北长约3.2千米，东西宽约2.8千米，绕湖一周近15千米。[2] 西湖平均水深2.27米，        水体容量约为1429万立方米。[3] 湖中被孤山、白堤、苏堤、杨公堤分隔，按面积大小分别为外西湖、西里湖（又称“后西湖”或“后湖”）、北里湖（又        称“里西湖”）、小南湖（又称“南湖”）及岳湖等五片水面，其中外西湖面积最大。孤山是西湖中最大的天然岛屿，苏堤、白堤越过湖面，小瀛洲、湖心亭        、阮公墩三个人工小岛鼎立于外西湖湖心，雷峰塔与保俶塔隔湖相映，由此形成了“一山、二塔、三岛、三堤、五湖”的基本格局。
    </p>
</section>

设置了如下的css

img { 
  float: left;
}

那么现实效果则如下所示

float与父级元素的宽度相关
如下所示的代码：

<section>   
    ![](img/picture2.png) 
    ![](img/picture3.png)     
</section>
//CSS
.float-right {
   float: right;
}
.float-left { 
  float: left;
}

如果article的width足够，那么会显示成下面的样子：

如果article的宽度不够，就会显示成下面的样子：

• clear
  当我们进行浮动的时候，浮动块会高于不浮动的父级，按照正式的说法叫所在的物理位置脱离普通流。 比如下面的HTML代码：

<div id="main"> 
   <div id="sidebar">我是左边栏</div> 
   <div id="container">我是主容器</div>
</div>

配合下面的css：

#main {
            width: 600px;
            padding: 20px;
            background-color: #00ff00;
        }
        #sidebar {
            background-color: #FF6600;
            float: left;
            width: 130px;
        }
        #container {
            background-color: #FFFF33;
            float: right;
            width: 420px;
        }

我们就会看到这种奇怪的情况（高度塌陷）：

1.这时我们加一个clear的div

<div id="main">
    <div id="sidebar">我是左边栏</div>
    <div id="container">我是主容器</div>
    <div style="clear:both;"></div>
</div>

2.我们在父级div的css中添加下面的代码：

#main {
      overflow: auto;
}

就会显示成下面的样子了：

以上就是clear最常见的用法，按照官方说法，clear属性规定元素的哪一侧不允许其他浮动元素。但是这个功能与display属性协同会产生不同的效果。 所以初学者来讲，只要记住这一种用法就好了。