关于网页布局你学会了吗？一些容易忽视的细节

网页布局是实现网页的基础，实现这个目的需要我们使用一些CSS样式。之前和大家介绍过，网页中，所有的内容大多是按照从上到下、从左到右的顺序排列的，借助CSS样式可以让网页按照我们的需要排列，不过关于这些样式你真的学会了吗？

1. 布局方式

在CSS中提供了一个用于元素浮动的样式 float，这个样式可以让元素按照我们的需要向指定的位置浮动，使用比较多，操作简单，但是这个样式会对网页中其他的内容在排列产生影响。在使用 float 样式浮动的元素之后的内容，会忽视它的存在，占据它的位置，但是你有注意过当两个元素中都有内容的时候是如何显示的吗？因为浮动上移的元素其中内容是否被覆盖呢？恐怕多数人并不关心这个细节问题，他们认为只要知道这个样式是用来实现浮动就可以了。

和float相比，position的使用就比较少了一些，因为它的实现需要添加一些偏移量，尽管这个CSS样式只提供了四个属性值，但是作用却是巨大的，而且每个属性值产生的影响都不相同。借助这个样式可以实现固定定位、绝对定位和相对定位，因为现在移动设备的使用，所以很多时候我们并不习惯使用这个样式，因为我们需要考虑用户屏幕的变化，一不小心很可能会把希望呈现给用户的内容定位到某个不可见的区域。

2. 布局规律

因为使用浮动或者定位样式，网页中内容的排列方式发生了变化，而且变化很多，我们需要去熟悉这些变化，在这里和大家总结一些布局之后网页呈现的规律。

首先，使用浮动样式，对网页中其他内容排列都会产生影响，所以需要设置一些清除浮动的功能，避免这些影响，使用 clear 可以达到这个目的；

第二，浮动之后，其他内容会忽视这个元素的存在，占据它的位置，但是两者的内容可以正常的显示，这点和使用绝对定位是有区别的，不过尽管这是一个规律，但是在网页布局方面我们并不希望这种请客的发生，因为它会使我们的页面不规范的显示，所以如果已经习惯了在浮动内容的后边添加清除浮动的样式，那么这个情况您并不会遇到；

第三，绝对定位是以它父容器为基准实现的，但是需要我们注意的是，这里所说的父容器并不是指使用绝对定位元素的上一级标签，而是在这个标签外的实现定位的标签，如果没有那么这个元素的定位是浏览器窗口最为基准实现的；

第四，相对定位只是针对当前的容器实现的定位，它不需要自己的父容器实现定位，只要有一个包含它的标签它就会以这个标签为基准实现定位，如果没有包含的容器，那么它将采用浏览器窗口作为基准实现；

第五，在使用固定定位时，如果我们设置定位元素的宽度和高度，那么我们看到的页面，可能因为浏览器本身添加了一些边距样式，使得在元素的周围有一些空隙，但如果我们直接设置left、right的属性值，那么这些空隙便不会出现，至于浏览器中那些默认的样式我们也不需要再关心；

第六，如果是两个没有实现网页定位内容，当我们向下拉动浏览器的滚动条时这两块内容会同时向下移动，但是如果我们让排在第一个的元素实现了定位而第二个按照普通方式排列，那么当我们向下拉动的时候，第二个元素的部分内容会在第一个下方，如果我们同时实现了这两个元素的定位，那么我们将看到第二个元素向上移动的时候会覆盖第一个元素；

……

关于CSS中定位的学习可以说是一大难点，这里边有很多需要总结的规律，这些规律都比较琐碎，不过开发中常常会因为不熟悉它们而造成一些麻烦，所以请在日常的练习和学习中留意这些问题，它们真的很重要。