html网站布局制作 第1篇
下图为元素浮动导致的父级边框塌陷
在浮动元素的父元素中设置 overflow:auto; 或 overflow:hidden; 属性。这会使父元素包含浮动元素，并清除浮动，例如：
语法：
在浮动元素的父元素中添加一个带有 content:__; display:table; clear:both; 属性的伪元素。例如:
语法：
内容溢出案例：
都 是勇敢的你额头的伤口 你的 不同 你犯的错都 不必隐藏你破旧的玩偶 你的 面具 你的自我他们说 要带着光 驯服每一头怪兽他们说 要缝好你的伤没有人爱小丑 为何孤独 不可 光荣人只有不完美 值得歌颂谁说污泥满身的不算英雄
无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。
语法：
若内容被修建则设置浏览器以滚动条的方式查看剩余内容，内容未溢出则无需修建不会设置滚动方式。
html网站布局制作 第2篇
在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：
实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。
演示案例：
设置的元素不会被显示。
元素被视为内联元素，并在同一行内显示。
该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。
html网站布局制作 第3篇
演示案例：
设置元素向左浮动
设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动，剩余元素会自动填充浮动元素的原有位置，并防止遮住浮动元素会自适应移动。
浮动属性中的左移动/右移动，代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。
清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。
移动规则：
清除左浮动：设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。
清除右浮动：设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。
案例：
排在元素layer02前面的元素layer01为右浮动，并未设置左浮动，对于layer02设置清除左浮动之后没有先行元素向左移动，因此layer02元素仅执行向右移动。
排在元素layer02前面的元素layer01为右浮动，对于layer02设置清除右浮动之后有先行元素向右移动，因此layer02元素会先向右移动并停留在先行元素layer01的下方。
清除两侧浮动的元素将停留在最低元素的下方，并执行浮动的指令向右移动。
html网站布局制作 第4篇
代码如下（示例）：
代码看似繁多，实际上就是几个大的盒子包裹着若干个小盒子，并且在创建盒子的时候，可以利用emmet语法简便地生成每个盒子的类名，方便后续css装饰的时候指定。
代码如下（示例）：
注意看到前两个代码块，其中第一个代码块基本上是必需的，因为在开发网页实际操作中，我们发现实际上浏览器以及一些模块会自带一个边距，这对于我们精准地开发网页来讲是不友好的。
而第二个代码块是和本次完成的任务有关，本次我们写的这个网页布局是按照百分比来定义宽高的，如果没有第二个代码块，会出现宽度100%但高度为0的情况，具体原因可以参考：为什么我明明设置了 height: XX%，却不起作用？
完整代码以及成果图如下：
完成一个网页布局，实际上就是设计大致布局、HTML完成基本框架、CSS完成装饰的过程。当中在调节参数的时候需要多加耐心，必要时要使用ps等工具来精准测量。