网页布局的思路

网页布局

布局思路

对于我这种初学者来说，浮动真的是让我待如初恋（咬牙切齿），有的时候你让它往东，它偏向西，真的是脑壳疼，所以打算整理一下思路：

对于一个网页的排版可分为两种情况（横向和纵向）
1.纵向区块，则每个区块写出一个div即可，因为div是独占一行的（块级元素）
2.横向区块，则
a . 同样每个区块写出一个div，且每个div都进行浮动；
b . 有需要则设置各个div需要的宽度，但总和不超过父盒子的宽度。
c . 有必要也设置各自高度，以及颜色背景或边框，以出现明显的视觉效果，这样有助于排错；
d . 处理父盒子的高度：在最后位置设置一个用于清除浮动的div（这样父盒子才“表现正常”），或对父盒子使用overflow:hidden;或设置一个固定的高度以包住里面的盒子（里面盒子高度固定的情况下可用）。这一点很有必要。

布局一定要注意：

1. 横向排列的布局需要用到浮动（一左一右，两左一右，或者都靠左）
2. 只要有浮动元素，一定要考虑父元素的高度问题，如果不对其进行约束，就会使得父元素受其子元素的影响浮动起来，就会使得纵向位于父元素下面的纵向区块向上移动，从而使的父元素无法正常的显示
   约束方式：
   a. 设定固定高；
   b. 清除浮动以获得自然高
   • 父元素使用overflow：hidden；
   • 父元素的最后位置额外加一个div并设置其clear:both;