网页制作的页面布局 第1篇
演示案例：
设置元素向左浮动
设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动，剩余元素会自动填充浮动元素的原有位置，并防止遮住浮动元素会自适应移动。
浮动属性中的左移动/右移动，代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。
清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。
移动规则：
清除左浮动：设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。
清除右浮动：设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。
案例：
排在元素layer02前面的元素layer01为右浮动，并未设置左浮动，对于layer02设置清除左浮动之后没有先行元素向左移动，因此layer02元素仅执行向右移动。
排在元素layer02前面的元素layer01为右浮动，对于layer02设置清除右浮动之后有先行元素向右移动，因此layer02元素会先向右移动并停留在先行元素layer01的下方。
清除两侧浮动的元素将停留在最低元素的下方，并执行浮动的指令向右移动。
网页制作的页面布局 第2篇
流式布局最大的优势在于针对不同浏览器窗口尺寸，这种布局方式都可以适应。在编写流式布局的 CSS 时，不能直接指定元素的具体宽度，而是需要通过百分比这类相对单位进行设定。同时设置最小和最大宽度，以确保在浏览器窗口过小时或过大时，页面仍能够准确地展示内容。
定位布局是通过 CSS 的绝对或相对定位属性来控制元素的位置。这种布局技巧能够让设计师更加精确地控制页面中各个元素的位置和层叠顺序，从而实现更灵活多样的页面布局效果。
这种布局技巧是当下网页设计的重要趋势之一，可以确保网页在桌面电脑、平板电脑和手机等各种终端上都能够完美呈现，并且内容版面合理、清晰易读。你可以针对不同的屏幕尺寸设定不同的样式表，从而使页面在不同终端上能够呈现最佳的布局效果，能够提供一致而完美的用户体验。
分栏布局是通过将页面垂直划分为多个列，可以更好地组织和展示不同类型的内容。每一栏可以独立展示不同的信息，如导航菜单、文章列表、广告位等，使用户能够快速找到所需信息。个人觉得分栏布局还有利于提升页面的视觉吸引力，通过合理的排列和搭配，可以有效引导用户的视线，增强交互性和信息呈现的清晰度。
层叠布局可以使页面上的不同元素能够相互叠加呈现出立体感和视觉层次。这种布局可以让网页看起来更具吸引力，同时也有助于突出重要内容并提升用户体验。通常我们可以用阴影效果或半透明背景让其与主体内容区分开来，以便更好地形成层叠布局效果。
希望上述介绍能够帮助你更好地理解不同页面布局技巧的特点和应用场景。在实际网页设计中，根据具体需求合理选择和组合不同的布局方式，能够提升用户体验，增加页面吸引力，为用户提供更好的浏览体验。
网页制作的页面布局 第3篇
下图为元素浮动导致的父级边框塌陷
在浮动元素的父元素中设置 overflow:auto; 或 overflow:hidden; 属性。这会使父元素包含浮动元素，并清除浮动，例如：
语法：
在浮动元素的父元素中添加一个带有 content:__; display:table; clear:both; 属性的伪元素。例如:
语法：
内容溢出案例：
都 是勇敢的你额头的伤口 你的 不同 你犯的错都 不必隐藏你破旧的玩偶 你的 面具 你的自我他们说 要带着光 驯服每一头怪兽他们说 要缝好你的伤没有人爱小丑 为何孤独 不可 光荣人只有不完美 值得歌颂谁说污泥满身的不算英雄
无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。
语法：
若内容被修建则设置浏览器以滚动条的方式查看剩余内容，内容未溢出则无需修建不会设置滚动方式。
网页制作的页面布局 第4篇
在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：
实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。
演示案例：
设置的元素不会被显示。
元素被视为内联元素，并在同一行内显示。
该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。