拿到了设计稿，应该怎么写前端布局，从哪里入手？什么是浮动？关于float知多少，简单易理解，小白快速入门
当我们拿到一张设计稿准备写网页的时候，我们一般会整体看一下设计稿的结构，看的顺序是从上到下，从左到右。
设计稿的结构大致如下：
今天我们就以上面的结构来讲解一下网页的布局。
从上到下，头部区域、导航区域、内容区域、底部区域。
头部区域一般会是一张宣传图或者宣传语，现在常见的是几张轮播图。我们以一张图为例来写一下。
这张图应该是占据屏幕100%的宽度，高度上自适应。代码如下：
"header.png" style="width:100%;">
设置了宽度，高度不设置，高度就会随宽度自动调节。
那如果像上面是一句宣传语，怎么写呢？
我们用div就可以。div是占整行的，所以，代码很简单：
"text-align:center;">头部区域
text-align是div内容的对齐方式，如果不设置，默认是左对齐，center是居中对齐。
当然，你也可以根据实际情况，设置字号大小（font-size）、字体颜色（color）、div的背景颜色（background-color）等等。
接下来是菜单导航区域，一般情况下，菜单导航是下面这个样子。
一说导航，我们会立马想到什么？链接，就是它——，
首先，我们观察它的结构，从上到下，就一个元素，我们用div，div里面，从左到右，三个元素，我们用就可以了。代码如下：
我们这样做，出来的效果并不是我们示例图的样子，它是下面这个样子：
这是为什么呢？因为它是内联元素
内联元素的大小和它里面内容的大小是一样的，也就是说，它是被里面内容撑起来的，即使设置了宽高也不起作用。
有人会说，那可以设置内边距（padding）、外边距（margin）。不好意思，对于内联元素来说，只支持内外边距的左右设置，上下设置也是不起作用的。
那怎么办呢？
在这里，我们就要讲一个非常常用的布局方法——float。
一个网页文档，可以理解为一个从上到下的拼图底板，我们写的所有的标签，可以理解为一个一个的拼图单片。正常情况下，单片是在底板上的，一个挨一个的。当我们给某个单片赋予了魔法，这个单片就可以悬浮于底板之上，并不再占用底板的空间了。这个魔法就是float。
float叫浮动，它有两个值：left和right。设置了float属性的标签，就可以在网页里悬浮起来了，可以左浮动也可以右浮动。它一般是给并不需要占用一行的块元素设置。
元素是内联元素，那它可不可以显示成块元素呢？答案是：可以的。
我们可以通过display这个属性把内联元素设置为块元素，当然，也可以通过它，把块元素设置为内联元素。display有很多属性值，等我们后面介绍常用的CSS属性的时候，再详细介绍。
那上面的样式代码可以修改成这样：
a{
color:#f2f2f2;
display:block; /* 设置为块元素 */
float:left; /* 左浮动 */
}
上面/**/是注释。
那这样设置了，会是什么样的效果呢？看下面：
我们设置的黑背景没有了，这是因为div里面的元素全都是浮动的，并没有占据div里面的空间。我们也没有给div设置宽高，它就是一个宽为0像素，高为0像素的元素，所以，设置了背景也看不到。
这个时候，我们就需要再学习一个CSS属性：clear。
clear是用来清除浮动的。在最后一个浮动元素的后面，加一个标签，给其设置上clear:both;就可以了。
看下这样设置的效果：
背景出来了，但是看起来，和第一次的差别不大，但是，标签的结构已经发生变化了，我们只要给加上一个内边距，效果就出来了。比如：padding: 14px 16px;上下14像素，左右16像素，看下效果：
是不是和想要的效果差不多了。细心的同学可能会发现，文字下面有一条线，这个是因为标签自带了一些样式，好多标签都会自带一些样式，比如~
标签自带上下外边距。如果我们并不需要标签默认的样式，我们可以通过CSS来进行修改。
上面的下划线我们可以通过设置text-decoration这个属性，给它设置消失了。代码是这样的：
text-decoration:none;
下划线消失了，好像还差点，上面的首页是红底黑字，这个是鼠标放到链接区域时的效果，我们在点击链接的时候，会发现，鼠标划上去会有变化，鼠标点击又会出现不同的效果。这个是给标签不同状态下，设置了不同的属性实现的。
未点击过（a:link）
鼠标点击松开（a:visited）
鼠标浮上（a:hover）
鼠标点击不松开（a:active）
如果四种状态都设置，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后，才能看到效果。
这四种效果属于伪类，伪类我们会在后面的文章里讲解，在这里就不多介绍了，大家知道这样设置就可以了。
像上面的红底黑字的效果，就是给a:hover设置了属性，代码如下：
a:hover{
color:#333;
background:red;
}
好了，到现在为止，我们就完成了菜单导航区域的内容了，完成的代码如下：
导航区域有点小复杂，不过，学会了导航区域的内容，下面内容区域就是小case了。
内容区域和导航区域类似，从左到右，也是三部分，那么，我们也需要用到float了。
"left">左边
"center">中间
"right">右边
"clear:both;">
效果图：
元素之间的间距，可以通过margin调整。宽度的设置，我们可以通过百分比来设置。三个元素的宽度+元素之间的间距不能超过100%，超过了，元素会被挤到下面去。在最后一个元素后面，不要忘了加一个空标签，设置clear:both;如果不设置，下面的元素会和他们重叠。
底部区域就简单了，一般情况下，底部区域就是一些版权信息，用一个 OK，布局今天就先说到这，float是比较常用的一个布局工具，它也有很多弊端，随着前端的发展，也出现了更好用的布局工具，比如flex，这个以后写篇文章单独讲讲，其他更多更详细的前端技能，可以微信搜索公众号”刘小妞的栖息地“或者扫描下面的二维码学习。