css学习8：浮动和流体布局

十七、浮动和文档流

1. 默认文档流

- 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性

- 默认文档流,画格子,内联和块级

- 内联元素，从左向右排列

- 块级元素，从上向下排列

2. 脱离文档流

文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流：

- float 浮动

- position 定位(绝对定位、固定定位)

2. 浮动

- 子元素在父元素中浮动，会使其脱离文档流，

导致父元素对其的管理能力

- 浮动属性

- `float：none`默认不浮动

- `float：left`左浮动

- `float：right`右浮动

(1)浮动过程：

- 脱离文档流不再撑起父元素

- 不再自占一行

- 在元素浮动的“当前行”向左或向右对齐

(2)元素浮动特点

1.元素浮动后对父级的高度有影响，不再撑起父级的高度

2.元素浮动后可以在父元素的左侧或右侧排列

3.元素浮动后不自占一行

4.元素浮动后会对后面的文档流中的兄弟元素产生影响会遮盖其后面的兄弟元素

5.内联元素浮动后，自动变成块级元素

6.浮动元素仍受父元素影响，还是在父元素的范围内

7.当父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会换行

8.当元素浮动时虽然不自占一行，但会向前占位，前方空值的位置都会属于自己所有，因此后方的元素换行时，不能占据元素向前占位的地域（见元素占位示意图）

9.当元素浮动时，原则会盖住其后方在文档流中的兄弟元素。但文字、图片等（行内元素和行内块）不会被盖住，其后兄弟元素的文字不会被盖住而是环绕浮动元素四周显示。解决方案包裹文字的元素浮动在前一个元素侧面。（见文字环绕示意图）

3. 清除浮动

- 清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌

- 浮动的影响父元素无高度

- 父元素无高度后，父元素的兄弟元素会向上，发生被遮盖

（1）利用高度解决

给父元素高度，弊端是未必知道子元素的高度

（2）父元素也浮动

父元素浮动，会影响父元素的兄弟元素

（3）父元素溢出隐藏

overflow：hidden/auto，父元素中的子元素可能会被隐藏（利用BFC 块级格式化上下文中，使用该属性可保证浮动元素也可以被计算入父级的高度）

（5）用伪元和clear属性素解决

给父元素增加一个在尾部的伪元素

.clearfix:after {content: "";display: block;clear: both;
}
.clearv {*zoom: 1;
} /*IE/7/6*/

4. 浮动流体布局

PC 端页面会有一个内容部分的固定宽度（例如：1200px、1190px、1004px、960px 等等）。

液晶还没普及的年代，网页设计需要考虑 800×600 的分辨率。之后，液晶屏开始普及，1024×768，使用率接近 50%(国内)，所以很多网站都是以 1024 的宽度为标准进行设计的。

现在的液晶屏大小已经变得多样化，4k 时代到来，高分辨率，让 pc 端页面布局的宽度设计变得更加要复合用户群。

(1) 分析 pc 端页面布局特点

pc 端布局都存在一个用于适应最小屏幕显示的居中元素。一般会把内容的结构都放在这个居中的元素中，左右两侧留白。

因此在 pc 端布局中，可以在用于划分某个部分的元素内部加入一个用于居中的元素。如：

(2) CSS reset

HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间存在差别。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。这就是CSS reset。

/* 星号的效率过低，非练习时可以自定义某些元素去掉margin: 0;padding: 0; */
* {margin: 0;padding: 0;
}
a {text-decoration: none;
}
ul {list-style: none;
}
/* 清除浮动 */
.clearFloat:after {content: "";display: block;clear: both;
}
.clearFloat {*zoom: 1;
}
/* 如：针对学子商城居中1000宽度 */
.center {width: 1000px;margin: 0 auto;
}

css学习8：浮动和流体布局相关推荐

CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
css学习笔记（三）——布局模型
布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末 ...
CSS学习笔记之浮动布局
什么叫文档流? 简单来说,就是指元素在页面中出现的先后顺序. 一.正常文档流 "正常文档流,将一个页面从上到下分为一行一行,其中块元素独占一行,相邻行内元素在每一行中按照从左到右排列直到该行 ...
CSS学习（第四天）（浮动，常见网页布局，清除浮动，PS切图）
CSS浮动 1 浮动 1.1传统网页布局的三种方式 1.2 标准流(普通流/文档流) 1.3 为什么需要浮动? 1.3为什么需要浮动? 1.4什么是浮动? 1.5浮动特性(重难点) 1.6 浮动元素经 ...
CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
7.（css）使用浮动布局学成网案例
文章目录 1. 页面制作重点提炼 2. 前期准备素材 3. 前期准备工作 4. CSS属性书写顺序(重点) 5. 布局流程 6. 页面制作 6.1 1) 头部制作 6.2 2)banner制作 6.3 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
html中左右浮动怎么写,css 浮动(float)页面布局
[第一步整体布局与公共CSS定义]我们先来分析一下这个页面页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图下载 (116.12 KB) 2009 ...
CSS学习笔记 04、浮动与定位
文章目录前言一.浮动 1.1.1.浮动的基本概念 1.1.2.浮动的顺序贴靠特性 1.1.3.右浮动效果 1.1.4.案例:使用浮动设计网页布局(分析及源码) 1.1.5.BFC规范与浏览器差异 ...

css学习8：浮动和流体布局

十七、浮动和文档流

css学习8：浮动和流体布局相关推荐

最新文章

热门文章