HTML之浮动和边距

在讲浮动之前，我们首先需要知道，html网页其实是一个文档流。浏览器在加载网页的时候是根据文档流自上而下来加载。我们所有的元素和样式都是写入在这个文档流里面。 但是，如果我们加了浮动的话，这个元素就会破坏这个文档流，越过普通的文档流元素标签。浮动到父类元素的左侧或者右侧。 浮动的语法： float : none 不浮动 、left 左浮动 、right 右浮动 clear:both 清除浮动 例如，我建立一个DIV盒子，并加上一些文字和一张图片： 我们会发现，效果离我们预想的有一些遥远： 我们希望的是，这个文字能围绕图片，类似于word文档里的一个环绕图片的功能。此处，浮动就发挥了他的作用，我们给图片加上一个浮动： 效果如下图： 我们会发现，图片根据父元素div 进行了向左浮动。这里有一点，当一个块级元素，没有设定浮动的时候，宽度是平铺整个浏览器，并且独占一行。当一块块级元素，不想独占一行的话，加上浮动，打破这种文档流模式，它也会破坏元素结构。 这是3个div容器，容器1和容器3进行了左浮动，容器2进行了右浮动，我们来看一下效果： 但是，注意了，这个时候，我们把容器3的浮动去掉，产生的结果是这样的： 我们会发现，容器3不见了。原因是因为，容器1加上了浮动，脱离了文档流。浮动到了容器3的上方。把容器3给遮住了，如何证明呢？我们给容器3加多一个宽度： 效果如下： 我们会发现，容器3仅展现出了多出来的20px。所以，加上了浮动以后。元素就脱离了文档流。浮动到了文档流的上方，单独的形成了一个层面。 那么如何将容器3在不浮动的情况下完全展现出来呢？这个时候就需要用到我们的边距了。 边距分为外边距和内边距，外边距为margin,内边距为padding。我们先来看一个例子： 这里我设定了2个DIV盒子。包含关系。先不说代码，效果如下图： 那么这样的一个回形字是怎么做到的呢？ 我们一点点的来看代码： 首先我们来看box1,box1里有这么一句代码：margin:100px auto; 这句代码的含义是上下距离元素100px，左右居中。margin代表的是外边距，所以元素内部并不会有什么变化。那么这个100px体现在哪里呢？我再增加一个div，这样会比较直观一点： 这个比较好理解，我们来看复杂一点的里面的box2： 这边的margin:80px 代表的是这个div的外边距距离别的元素上下左右都是80px。 padding:10px的意思是内部元素距离这个div的边框有10px的距离。 那么具体怎么说明呢？我们还是以图的方式来更加直观的感受一下margin和padding。 之前我教大家用过google浏览器的F12工具。这里我就以这个工具来做展示： 我们用工具选中这个 box2，可以清晰的看到，工具的右侧显示出了一个图。上面很明白的写着。外面的margin，上下左右都是80像素，没有border，padding 上下左右都是10像素，里面的内容为100像素，如果大家看的不是很明了，我再加一些内容： 我在box2里加了一个span,然后给span设定了背景色，代码所展示的效果如下图： 那么这个80px和10px怎么理解呢？ margin和padding的语法格式： margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; 分别代表左右上下，这个非常的语义化，我在这里就不多做解释了。 margin:20px 20px 20px 20px; 这边的20px从前往后分别代表的是上右下左。 margin:30px 30px; 第一个30px代表的是上下的距离，第二个30px代表的是左右的距离。 margin:40px; 这个40px代表的是四周的距离，也就是上下左右都是40px。

padding同理。就不多做解释了。