本文共 2250 字，大约阅读时间需要 7 分钟。
一、浮动
1、什么是浮动？
浮动（float）就是让块级标签不独占一行。目的（使用场景）：把块级标签元素可以排在一行上。
2、浮动的原理
就是让元素脱离文档流，不占用标准流。
3、浮动的属性
float:left：左浮动
float:right：右浮动
float:none：默认值，不浮动
Title box1box2
先看一下原来的效果，现在可以添加浮动属性来查看
.box2{ background-color: #217aff; float: right;} 
再给box1添加浮动属性
.box1{ background-color: #ff0000; float: left;} 
可以看到，当添加玩浮动后，元素块也会进行移动，之前在原理处也讲过，浮动就是元素脱离文档流，不占用标准流。
如果此时再添加一个box效果又会如何：
Title box1box2box3
可以看到，浮动后，后面的元素不管是块级还是行级元素，都不会显示在下一行，为了避免这一情况的发生，我们可以清除浮动
4、清除浮动
目的：让后面的元素自动掉到下一行。
（1）添加空标签，并设置样式
clear:left; 清除左浮动 clear:right; 清除右浮动 clear:both; 清除左右浮动 clear:none; 左右浮动都不清除Title box1box2box3
（2）在要清除浮动的父级添加样式：overflow:hidden;
overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。
Title box1box2box3
此时需要的是将box3的div移出来，不要放在wrapper下，至于box3为什么不在box1下，也是因为box3不在wrapper下，所以个wrapper设置的样式，就不在box3身上显示
（3）在要清除浮动的父级添加伪元素，并设定样式：
父元素:after{
content:""; display: block; clear:both; }Title Title box1box2box3
效果和第二个一样，所以在开发过程中推荐使用第二个，比较方便
五、盒子模型
1、组成
左右规定了元素框处理元素内容（ content ）、内边距（ padding ）、边框（ border ） 和外边距（ margin ） 的方式
2、介绍
（1）margin（外边距）
margin-left:左边距
margin-right:右边距
margin-top:上边距
margin-bottom:下边距
margin:可用来设置任意一个边的边距，可以带1至4个参数。
1个(apx)：表示上下左右都有这样的外边距apx
2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx
3个(apx bpx cpx)：表示上外边距为apx，下外边距为cpx，左右外边距为bpx
4个(apx bpx cpx dpx)：表示上为apx,右为bpx,下为cpx,左为dpx
（2）padding（内边距）
与margin相同
（3）border
border-width : 设置边框的宽度。
border-style : 设置边框的样式。
（1）none: 默认值，无边框。
（2）solid： 定义实线边框。
（3）double 定义双实线边框。
（4）dotted`: 定义点状线边框。
（5）dashed：定义虚线边框。
border-color : 设置边框的颜色。
border 边框的简写： {width style color} ，顺序可以随便
盒子的真实尺寸如下：
盒子宽度 = width + padding左右 + border
盒子高度 = height + padding上下 + border上下
（4）display：用来设置元素的显示方式
display:none:不显示元素
display: block:块显示，在元素前后设置换行符。目的：将行级标签转换为块级标签（因为行级标签不识别宽高，而块级标签识别，转换后，行级标签也可以设置宽高了）
display:inline:行内显示，将块级标签转换为行级标签。
display:inline-block;将块级或行级标签转换为行内块级标签。
转载地址：http://eyvrn.baihongyu.com/