Note：设置浮动后，脱离标准文档流；但不脱离标准文本流；
当元素设置浮动属性后，会对相邻的元素产生影响，相邻元素指的是紧邻后面的元素。消除影响方法：width:100%;overflow:hidden（包含元素有影响时）或clear:both（后面元素有影响时）
对文档流，文本流的理解
对设置浮动后的标签，如果是文档流里的会直接占据它的位置，文本（
）会在其周围显示
与position:absolute对比：position:absolute会脱离标准文档流和标准文本流
3、position
包含块：离它最近的，设置了position的祖先元素
两种情况：
未设置偏移量：无论是否存在已定位祖先元素，都保持在元素初始位置
设置偏移量：无已定位祖先元素，以为偏移参照标准
有已定位祖先元素，以距其最近的已定位祖先元素为偏移参照标准
Note：对于未设置width的元素
默认100%
但是加上position:absolute之后，按包含元素width来算。
即便我们看到了很多风格独特、造型时尚的网站，实际上他们的布局在大体上还是有一定规律的，这也就是所谓的常用网页布局。什么事网页设计布局？其实就是网页设计中每一元素分布的位置、占据的空间与板面的划分，选择一个正确的网页布局对网站的整体建设有着举足轻重的作用。常用的网页布局一般分为以下三种：通栏式、左中右式和F式。三种布局分别适用不同类型的企业，下面为你一一讲述，这三种布局的主要特点与选择前提。
一、通栏式
通栏式是现今为流行的布局，所谓的通栏式就是不需要将页面进行纵向的切割，直接横向地展示网页的图文内容。这类型的布局为灵活，而且不受边框的限制，在Banner的制作上，则更显得大气非凡。我们在看很多高科技类企业的产品展示页都是采用这种现代色彩浓厚的布局，更显其高端大气派。虽然这种类型的布局对企业的限制要求并不多，但相对于那些信息量巨大的网站而言，这一类布局却是非常不合适，其主要原因就在于通栏式的承载信息量小，无法承担大量的信息负荷。
二、左中右式
典型的例子就是各大门户网站，这类布局的主要特点就在于页面可以灵活地进行切割，Banner只占其中的一小部分，但整个页面所承载的信息量相对而言是很多的。这类的布局当然是适合那些信息丰富的网站选择，但有一点要注意的是，尽管信息丰富，也一定要做到排版整洁，富有逻辑性，否则页面反而会显得杂乱无章。
三、F式
所谓的F式是一种形象比喻的说法，就是网页将重点的内容放在左侧，然后遵循用户浏览轨迹的原理，从左上角开始沿左边顺势而下。一般而言都是重要产品与服务信息、网页导航分类栏等主要元素才会被放置在这一位置。典型的例子就是个大电子商务平台，如淘宝、京东等都是选择了F式。当然这一布局的限制相对而言较多，因为不是所有的企业都可以选择，而是那些信息量更为丰富，而且是有着巨大树形结构的网站才会选择这种类型的布局。
靠前、网站的布局要优先考虑目标用户的体验
第二、网站的布局可以采用分类分局，保持网页的秩序
第三、简单清晰的网站布局内容
信息化时代不断在变化，网站建设的根本也要不断变化。网站建设不仅要考虑到搜索引擎的需求，更重要的是网站建设能够为企业带来高效益，因此，网站建设要从用户体验出发。
网页布局与样式
1、布局
不要使用
进行布局，因为：table可能会在所有tr、td加载完成以后才显示，所以加载完成之前界面是一片空白；用table布局会将布局方式写在html中，违反了“语义性”原则；用table会影响搜索引擎的抓取，不利于SEO。因此Table用来表达真是表格状数据的东西，布局用Div(层)+Css来做,Div用来圈定元素，CSS用来定义元素的位置。Div+CSS就是将要布局的内容用
切成块，然后使用css描述每个块的大小、位置等。
2、样式
ldisplay：元素是否显示，可选值none（不显示）、block（显示为块级元素，此元素前后会带有换行符。）、inline（显示为内联元素，元素前后没有换行符）等。
lcursor，鼠标在元素上时显示的光标图标，可选值：cursor（默认光标）、pointer（超链接上的手）、text（输入Bean）、wait（忙沙漏）、help（帮助）等。
lLI不显示圆点：LIST-STYLE-TYPE:none;一般设在li或者ul上。
l应用：图片：不显示边框，见备注。
3、CSS浮动
l浮动
在使用div布局的时候，发现每个div都是按照块的方式出来的，不利于页面的布局，所以CSS就提出元素的浮动技术，可以使得块元素在浮动的情况下在同一行中出现。
l特点
元素在浮动的时候遇到父容器的边框就会卡住
如果子元素和父元素同时向相反的方向浮动，那么先浮动父元素，然后子元素在父亲元素的内部浮动
如果父元素没有浮动而且包含了浮动的子元素，那么浮动的元素就会脱离文档流(重点)
4、lz-index
CSS中的z-index属性用于设置节点的堆叠顺序,拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面,这是我们对z-index属性普遍的认识.
l注意
z-index只能作用在已经定位的元素对象上。
使用javascript控制这种使用”-”作为连接符的样式属性时必须使用驼峰的命名方式：
THE END
1.6种经典网页页面布局,让你做设计不头疼本文给大家介绍 6 种经典网页页面布局,让你做设计不头疼它们分别是卡片式布局、分栏式布局、网格式布局、单栏式布局、大标题布局和 F 型布局。网页布局在网页的设计中非常重要,不同的网页布局会带给用户不同的第一印象,更会影响用户的使用感受。很多设计师都知道在网页设计中,要先布局,后细节,只有选择了合适的网https://js.design/special/article/classic-web-page-layout.html
2.用好这9个网页排版布局技巧,高级感说来就来!网页排版布局是网页上所有视觉元素的排列,通过页面元素的有意定位,我们可以控制元素之间的关系,更好地引导用户体验。作为网页设计的关键组成部分,网页排版布局决定了访问者注册页面元素的顺序、哪些元素最受关注,以及网页的视觉整体平衡。本文Pixso设计师结合资源社区的案例,介绍了 9个高级感的网页排版布局创意,一起来学习https://pixso.cn/designskills/web-layout-skills/
3.网页布局都有哪种?一般都用什么布局?你要问网站布局有哪些？今天，Mockplus为你精选了9款不同的经典网站布局设计案例，希望给你灵感。https://www.zhihu.com/question/21775016/answer/479827123
4.HTML+CSS+JavaScript网页设计与制作实例三、设计说明 在设计过程中,我注重保持整体风格的统一与和谐,采用清新自然的色调搭配,以及简洁明了的布局结构,营造出一种温馨舒适的浏览环境。同时,为了增强用户体验,我特意在每个页面中都加入了适量的动画效果和交互元素,如鼠标悬停效果、图片轮播等,使得整个网站更加生动有趣。此外,我还特别注重了响应式设计,确保网站https://blog.csdn.net/WebDesign_Mu/article/details/144069460
5.常见的网页设计布局有哪些?优秀的网页设计都有的8个特点优秀的网页设计都有的8个特点 网页布局在很大程度上决定了网站的用户如何和网页内容进行交互,好的网页设计具有很强的实用性和适应性,在进行网页设计时的更应该遵循网页布局的最佳实践效果,给观者带来最前沿最全新的网页体验,接下来一起来看看常见的网页设计布局及特点吧。https://cloud.tencent.com/developer/article/2229945
6.8个页面布局独特的网站设计赏析当我们访问这家位于芝加哥的设计公司官网时,您会看到“We turn information into experiences that people care about”这段文字展示在波浪之上。该网站展示了如何将设计案例与背景信息相结合。 2. The Goonies 网址:http://the-goonies.webflow.io/ 布局:头部采用全屏图像,滚动页面后进入一系列网格布局的页面 https://www.sj33.cn/digital/wysj/201909/51494.html
7.无从下手?也许你该从这五种经典网页布局开始设计优设网原理:人的行为很容易受到习惯的影响,而研究也证实了人思考、行为确实是模式化的。从左到右,自上而下,人们大多习惯了这种行为模式。F式的布局模式拥有良好的适用性,便于用户理解和交互。 相关趋势:F式布局中侧边玩法很多,有的设计师会将导航与之结合,或者在页面顶部加上大图Banner。 https://www.uisdc.com/5-website-layout-ideas/
8.网页设计中网页布局十五种方式6、POP布局 POP源自广告术语,指页面布局像一张宣传海报,以一张精美图片作为页面的设计中心。常用于时尚类网站,优点显而易见:漂亮吸引人,缺点是速度慢。 综合框架型: 上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”结构的,只是采用了框架结构。 https://www.cdcxhl.com/news/172845.html
9.5种经典的网页设计布局方式平面其它平面设计GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 不得不说,网页设计绝对是有套路的!网页布局虽然千变万化,但是如果你仔细观察,会发现有一些布局适用范畴相当广,经久不衰。今天的文章,我们就来聊一下5种经典的网页布局。 https://m.jb51.net/php/489768
10.网页设计实例解析与实用技巧分享助你提升设计能力设计师交互设计通过分析一些成功的网站实例,我们可以更好地理解网页设计的实际应用。以下是几个值得借鉴的案例: 2.1 Apple官网 Apple官网以其简洁的设计和直观的导航而闻名。首页的布局十分清晰,产品展示区与信息区相辅相成,用户可以很方便地找到想要的信息。Apple在色彩运用上也颇具匠心,简约的黑白配色让产品成为视觉的焦点。 https://www.163.com/dy/article/JK3971R205569BV4.html
11.网站设计架构图网站设计框架结构2、网站页面构成: 1)页头(Header):通常放置Logo(网站标志)、Banner(广告条)。 2)导航栏(Nav):通常放置在页面左侧、右侧、顶部、底部。 3)主体: 4)页脚(Footer):通常放置版权信息、联系电话、网站介绍、备案信息等等。 二、网页设计尺寸 1、网页布局 https://blog.51cto.com/u_16099165/7108233
12.web端交互设计页面布局对比分析20180407页面布局大致可分为网页(web)、软件、手机三类,其中web和软件有较大相似性,不作区分。软件界面布局依功能而决定,布局复杂。因为定义种类的标准和方式不同,页面布局类型分类较多,先总结比较常用和普遍的布局方式,以其他方式做补充。 页面布局的定义 页面布局是指,在设计页面的过程将页面各要素通过合理、有效、统一的https://www.jianshu.com/p/9c813632e678
