常用页面布局技术

最新推荐文章于 2024-08-09 17:24:43 发布

小不点--小布丁

最新推荐文章于 2024-08-09 17:24:43 发布

阅读量7.6k

点赞数 2

分类专栏：常用页面布局技术文章标签：布局

本文链接：https://blog.csdn.net/m0_37643611/article/details/68946231

版权

常用页面布局技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.自适应三列布局

1.使用绝对定位

<div id="center">中列</div>    
<div id="left">左列</div>    
<div id="right">右列</div>
body,html{
    height:100%;
    padding: 0px; 
    margin:0px;
    }
#left {    
    background-color: #E8F5FE;    
    border: 1px solid #A9C9E2;    
    height: 400px;    
    width: 100px;    
    position: absolute;    
    top: 0px;    
    left: 0px;}
#center {    
    background-color: #F2FDDB;    
    border: 1px solid #A5CF3D;    
    height: 400px;    
    margin-right: 102px;    
    margin-left: 102px;
        }
#right {    
    background-color: #FFE7F4;    
    border: 1px solid #F9B3D5;    
    height: 400px;    
    width: 100px;    
    position: absolute;    
    top: 0px;    
    right: 0px;}
(1)处于页面优化考虑，应先加载中间主体区块再依次加载左右侧两列列，所以中间主体区块div要写在左右侧两列区块div前面.

(2)该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。

2.浮动：

<style>        
//CSS reset
body,html {
height:100%;
padding: 0;
margin: 0
}
#left,#right {
float: left;
width: 220px;
height: 200px;
background: blue;
}

#right{
float: right;
}

#main {
margin: 0 230px;
background: red;
height: 200px;
}
</style>
</head>
<body>    
<div id="left">left </div>
<div id="right">right</div>
<div id="main">mian</div>
</body>
</html>
这是一种比较便利的实现方式，无需额外的元素辅助定位，同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定，中间自适应这一种三列布局，灵活性不强。

3.双飞翼布局

<style>        
*{            
margin: 0;            
padding: 0;        
 }        
.main,.left,.right{            
    height: 300px;           
    font: 20px/300px;            
    color: #fff;            
    text-align: center;        
 }        
.main{            
    width: 100%;            
    float: left;      
}        
.main .content{            
    margin: 0 300px 0 200px;            
background-color: black;        
}        
.left{            
width: 200px;            
float: left;            
margin-left: -100%;            
background-color: red;        
}        
.right{           
width: 300px;            
float: left;           
margin-left: -300px;           
 background-color: blue;       
}    
</style>
</head>
<body>   
 <div class="main">        
    <div class="content">中间主体区域宽度自适应</div>    
</div>    
<div class="left">左侧定宽200px</div>    
<div class="right">右侧定宽300px</div>
</body>
增加多一个div就可以不用相对布局了，只用到了浮动和负边距。

跟上潮流，试试 flex

<style>
.HolyGrail-body {  
display: flex;  
flex: 1;
}
.HolyGrail-content {  
flex: 1;  
background-color: green;
}
.HolyGrail-nav, .HolyGrail-ads {  
/* 两个边栏的宽度设为12em */  
flex: 0 0 200px;  
background-color: blue;
}
.HolyGrail-nav {  
/* 导航放到最左边 */  
order: -1;  
background-color: grey;
}
</style>
</head>
<body>  
<div class="HolyGrail-body">    
<main class="HolyGrail-content">...</main>    
<nav class="HolyGrail-nav">...</nav>    
<aside class="HolyGrail-ads">...</aside>  
</div>
</body>
flex 布局中不能将被定位的元素宽度或高度设定为 100%，这样会影响其他定值大小的元素。那么该如何设置中间元素的宽度呢，flex: 1; 即可.

二.水平居中与垂直居中

1.水平居中

（1）CSS3如何实现元素水平居中
   <1>行内元素如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的.
div{
border:1px solid red;
}
div.txtCenter{
text-align:center; 
}
div.imgCenter{
text-align:center; 
}

<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平显示居中</div>
<div class="imgCenter">
<img src="http://www.baidu.com/img/bd_logo1.png"></div>
<2>定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
div{
border:1px solid red;
width:500px;
margin: 10px auto; 
}
<div class="txtCenter">我是定宽块状元素，哈哈，我要水平居中</div>
<3>在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
  <1>不定宽块状元素1
        1）为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
        2）为这个 table 设置“左右 margin 居中。
        table{
        margin:0 auto; 
        }
        ul{
        list-style:none;margin:0;padding:0;
        }
        li{
        float:left;display:inline;margin-right:8px;    
        } 
    .wrap{
        background:#ccc; 
        }  
    注意：display:inline 的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps:内联对象就是不自动产生换行的元素，比如span） 而我们一般用的div是块级元素，默认display属性是block, 但将div的display设置为inline的话，则多个div可以象span一样显示在一行了。
    <2> 不定宽块状元素2
    改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果
    .container {text-align:center;}
    .container ul{list-style:none;margin:0;padding:0;display:inline ;   
    }
    .container li{margin-right:8px;display:inline;  }
    <3>不定宽块状元素3
    通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中
.wrap{
float:left;
position:relative;
left:50%;    
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">不定宽块状元素水平居中方法3</div>                   
</div>

2.垂直居中

(1)父元素高度确定的单行文本
垂直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.

.wrap{
margin:0;
height:100px;
line-height:100px;
background:#ccc;        
}
<div class="wrap">
<h2>父元素告诉确定的单行文本垂直居中</h2>                   
</div>
(2)说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效
(3)父元素高度确定的多行文本1
使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle（因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了）
.wrap{
height:300px;
background:#ccc;        
}
<table><tbody><tr><td class="wrap">
<div>
<img src="" alt="害羞的小怒海">                   
</div>
</td></tr></tbody></table>  
(4)父元素高度确定的多行文本2
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell， vertical-align:middle，但注意 IE6、7 并不支持这个样式。
.container{
height:300px;
background:red;

display:table-cell;
vertical-align:middle;          
}
<div class="container">
<img src="https://p1.ssl.qhimg.com/t01e41b648b394bca10.png">
</div>

三.CSS3弹性布局

随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列、对齐和分配空白空间。即便容器中条目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的条目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的条目也会被动态地调整。比如当容器尺寸变大时，其中包含的条目会被拉伸以占满多余的空白空间；当容器尺寸变小时，条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作

响应式Web设计(Responsive Web design)的理念是:
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

1.基本布局

简单的图片缩略图预览页面的 HTML 代码
<ul class="flex-container">
<li class="flex-item"><img src="//placehold.it/300&text=1"></li>
<li class="flex-item"><img src="//placehold.it/300&text=2"></li>
<li class="flex-item"><img src="//placehold.it/300&text=3"></li>
<li class="flex-item"><img src="//placehold.it/300&text=4"></li>
<li class="flex-item"><img src="//placehold.it/300&text=5"></li>
<li class="flex-item"><img src="//placehold.it/300&text=6"></li>
</ul>
.flex-container {
list-style: none;

 display: flex;
flex-direction: row;
fex-wrap: wrap;
}

.flex-item {
padding: 5px;
}
用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来确定主轴的方向，从而确定基本的条目排列方式。
表 1. “flex-direction”属性的可选值及其含义
属性值 含义
row（默认值）    主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr，则排列顺序是从左到右；如果文档顺序是 rtl，则排列顺序是从右到左。
row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
column  主轴为垂直方向。排列顺序为从上到下。
column-reverse  主轴为垂直方向。排列顺序从下到上.

默认情况下，弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时，会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如表2所示。

属性值 含义
nowrap（默认值） 容器中的条目只占满容器在主轴方向上的一行，可能出现条目互相重叠或超出容器范围的现象。
wrap    当容器中的条目超出容器在主轴方向上的一行时，会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
wrap-reverse    与 wrap 的含义类似，不同的是下一行的位置与交叉轴的方向相反。
可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来，
清单 3. “flex-flow”属性的使用示例
flex-flow: row wrap;

2.容器中的条目

（1）条目的顺序
默认情况下，容器中条目的顺序取决于它们在 HTML 标记代码中的出现顺序。可以通过"order"属性来改变条目在容器中的出现顺序。
例如：
.flex-item:last-child {
order: -1;
}
"order"属性的主要作用是兼顾页面的样式和可访问性。支持可访问性的设备，如屏幕阅读器，都是按照 HTML 中代码的顺序来读取元素的。这就要求一些相对重要的文本出现在 HTML 标记的前面。而对于使用浏览器的一般用户来说，在某些情况下把一些相对不重要的图片显示在前面是更好的选择。比如在一个商品的展示页面中，在源代码中把商品描述的文本放在商品图片之前。这样可以方便屏幕阅读器的读取；而在 CSS 中使用"order"属性把图片放在文本的前面。这样可以让用户首先看到图片。
（2）条目尺寸的弹性
弹性盒布局模型的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态地调整条目的尺寸。当容器中有空白空间时，条目可以扩展尺寸以占据额外的空白空间；当容器中的空间不足时，条目可以缩小尺寸以防止超出容器范围。条目尺寸的弹性由 3 个 CSS 属性来确定，分别是"flex-basis"、"flex-grow"和"flex-shrink"。

"flex-basis"属性声明接受的值与"width"属性是一样的，用来确定弹性条目的初始主轴尺寸。这是条目的尺寸被容器调整之前的初始值。如果"flex-basis"的值为 auto，则实际使用的值是主轴尺寸属性的值，即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto，则使用的值由条目内容的尺寸来确定。

"flex-grow"属性的值是一个没有单位的非负数，默认值是 1。"flex-grow"属性的值表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例。比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3，那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2，如代码清单 5所示。
.flex-item:nth-child(1) {
flex-grow: 1;
}

.flex-item:nth-child(2) {
flex-grow: 2;
}

.flex-item:nth-child(3) {
flex-grow: 3;
}
"flex-shrink"属性在使用上类似于"flex-grow"。该属性的值也是无单位的，表示的是当容器的空间不足时，各个条目的尺寸缩小的比例。在进行尺寸缩小时，条目的缩小比例与"flex-basis"的值相乘之后，就得到了应该缩小的尺寸的实际值。例如，在容器中有 3 个条目，其"flex-shrink"属性的值分别为 1，2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时，比如变成了 540px 之后， 则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px，主轴尺寸分别变为 190px、180px 和 170px。预览的页面见这里。

使用属性"flex"可以同时声明"flex-basis"、"flex-grow"和"flex-shrink"的值，格式是"none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时，相当于"0 0 auto"。当组成部分"flex-basis"被省略时，其值为 0%。代码清单 6给出了属性"flex"的使用示例。
.flex-item:nth-child(1) {
flex: 1 1 auto;
}

flex: 1;  // flex-grow 的值为 1，flex-shrink 的值为 1，flex-basis 的值为 0%。
需要注意的是，在容器分配额外空间时是以"行"为单位的。容器先根据"flex-wrap"的属性值来确定是单行布局或多行布局，然后把条目分配到对应的行中，最后在每一行内进行空白空间的分配。如代码清单 7中的 CSS 声明示例，
.flex-container {
width: 990px;
}

.flex-item {
width: 300px;
flex: auto;
}
由于容器的宽度只有 990px，所以在一行中只能排列 3 个条目，而剩下的 1 个条目则会被排列到单独的一行中。在 3 个条目的行中，多余的空间 90px 被平均分配给 3 个条目；而在一个条目单独的行中，多余的 690px 被该条目完全占据。

（3）条目对齐
第一种方式是使用自动空白边，即"margin: auto"。在使用自动空白边时，容器中额外的空白空间会被声明为 auto 的空白边占据，如代码清单 8所示。CSS 声明 profile 中通过"margin-left: auto"使得该条目左边的空白边会占据额外的空间，从而"Profile"文本会靠右显示。

<div class="flex-container">
<div class="logo">Logo</div>
<div class="profile">Profile</div>
</div>
.flex-container {
display: flex;
}
.profile {
margin-left: auto;
}

第二种方式是在主轴方向上的对齐。这是通过容器上的"justify-content"属性来进行设置，可以调整条目在主轴方向上的对齐方式。这种条目对齐方式的调整发生在修改条目的弹性尺寸和处理自动空白边之后。当容器中的一行中的条目没有弹性尺寸，或是已经达到了它们的最大尺寸时，在这一行上可能还有额外的空白空间。使用"justify-content"属性可以分配这些空间。该属性还可以控制当条目超出行的范围时的对齐方式。"justify-content"属性的可选值和含义如表3所示，
表 3. “justify-content”属性的可选值和含义
属性值 含义
flex-start  条目集中于该行的起始位置。第一个条目与其所在行在主轴起始方向上的边界保持对齐，其余的条目按照顺序依次排列。
flex-end    条目集中于该行的结束方向。最后一个条目与其所在行在主轴结束方向上的边界保持对齐，其余的条目按照顺序依次排列。
center  条目集中于该行的中央。条目都往该行的中央排列，在主轴起始方向和结束方向上留有同样大小的空白空间。如果空白空间不足，则条目会在两个方向上超出同样的空间。
space-between   第一个条目与其所在行在主轴起始方向上的边界保持对齐，最后一个条目与其所在行在主轴结束方向上的边界保持对齐。空白空间在条目之间平均分配，使得相邻条目之间的空白尺寸相同。
space-around    类似于 space-between，不同的是第一个条目和最后一个条目与该行的边界之间同样存在空白空间，该空白空间的尺寸是条目之间的空白空间的尺寸的一半。

第三种方式是交叉轴方向上的对齐。除了在主轴方向上对齐之外，条目也可以在交叉轴方向上对齐。容器上的属性"align-items"用来设置容器中所有条目在交叉轴上的默认对齐方向，而条目上的属性"align-self"用来覆写容器指定的对齐方式。属性"align-items"的可选值和含义如表4所示，实际的布局效果见图 3。

表 4. 属性“align-items”的可选值和含义
属性值 含义
flex-start  条目与其所在行在交叉轴起始方向上的边界保持对齐。
flex-end    条目与其所在行在交叉轴结束方向上的边界保持对齐。
center  条目的空白边盒子（margin box）在交叉轴上居中。如果交叉轴尺寸小于条目的尺寸，则条目会在两个方向上超出相同大小的空间。
baseline    条目在基准线上保持对齐。在所有条目中，基准线与交叉轴起始方向上的边界距离最大的条目，它与所在行在交叉轴方向上的边界保持对齐。
stretch 如果条目的交叉轴尺寸的计算值是"auto"，则其实际使用的值会使得条目在交叉轴方向上尽可能地占满。
属性"align-self"的可选值除了表中列出的之外，还可以设置为"auto"。当"align-self"的值为 auto 时，其计算值是父节点的属性"align-items"的值。如果该节点没有父节点，则计算值为"stretch"。

四.一行文字省略号与多行文字省略号

1.一行文字省略号

<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！
</p>
(1)text-overflow: ellipsis;
简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
(2)white-spaceoverflow: hidden；
下面是wschool上white-space可能的值：

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

2.多行文字省略号

(1)直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；
注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
    -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。   
(2)跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}
 <p>WebKit Browsers will clamp the number of lines in this paragraph to 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
这里注意几点：

1.height高度真好是line-height的3倍；
2.结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
3.IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；
4.要支持IE8，需要将::after替换成:after；
(3)JavaScript 方案
  用js也可以根据上面的思路去模拟，实现也很简单，推荐几个做类似工作的成熟小工具
<1>Clamp.js
下载及文档地址：https://github.com/josephschmitt/Clamp.js
使用也非常简单：
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});
<2>jQuery插件-jQuery.dotdotdotjQuery插件-jQuery.dotdotdot
$(document).ready(function() {
$("#wrapper").dotdotdot({
    //  configuration goes here
});
});

五.清除浮动

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：

1.父级div定义 height
代码如下:

.div1{background:#000080;border:1px solid red;/解决代码/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

Left

Right

div2

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题 

建议：不推荐使用，只建议高度固定的布局时使用

2.结尾处加空div标签 clear:both

<style type="text/css"> 
.div1{background:#000080;border:1px solid red} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat{clear:both} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<div class="clearfloat"></div> 
</div> 
<div class="div2"> 
div2 
</div> 
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 

优点：简单、代码少、浏览器支持好、不容易出现怪问题 

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好 

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

3.父级div定义伪类:after 和 zoom

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
/*清除浮动代码*/ 
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
</style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题 

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等） 

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。 

建议：推荐使用，建议定义公共类，以减少CSS代码。

4.父级div定义 overflow:hidden

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden} 
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 

优点：简单、代码少、浏览器支持好 

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

5.父级div定义 overflow:auto

.div1{background:#000080;border:1px solid red;/解决代码/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好 

缺点：内部宽高超过父级div时，会出现滚动条。 

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

6.父级div 也一起浮动

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 
原理：所有代码一起浮动，就变成了一个整体 

优点：没有优点 

缺点：会产生新的浮动问题。 

建议：不推荐使用，只作了解。

7.父级div定义 display:table

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;} 
.div2{background:#800080;border:1px solid red;height:100px;width:98%;} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div> 
<div class="div2"> 
div2 
</div> 
原理：将div属性变成表格 

优点：没有优点 

缺点：会产生新的未知问题。 

建议：不推荐使用，只作了解。

8.结尾处加 br标签 clear:both

<style type="text/css"> 
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1} 
.div2{background:#800080;border:1px solid red;height:100px} 
.left{float:left;width:20%;height:200px;background:#DDD} 
.right{float:right;width:30%;height:80px;background:#DDD} 
.clearfloat{clear:both} 
</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
<br class="clearfloat" /> 
</div> 
<div class="div2"> 
div2 
</div> 
原理：父级div定义zoom:1来解决IE浮动问题，结尾处加 br标签 clear:both 

建议：不推荐使用，只作了解。

六.代码reset

1.CSS Reset是什么？
在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE 下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

2.为什么要重置它？
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

3.下面是经常使用的重置代码：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, em, p, font, img, small, strong, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tr, th, td {margin:0;padding:0;border:0;outline:0;font-size:12px;vertical-align:baseline} 
ol, ul {list-style:none} :focus {outline:none; } 
table {border-collapse:collapse;border-spacing: 0} 
caption, th, td { text-align: left; font-weight: normal} 
strong {font-weight:600} 
a{font:12px Arial;text-decoration:none;color:#404040;cursor:pointer;} 
a:hover{text-decoration:underline;color:#FF3300} 
h1{font-size:16px;font-weight:600;color:#666} .left{float:left} .right{float:right} .clear{clear:both}