HTML5全栈开发序列课程 《前端入门》之布局一 余鹏作品.

Presentation on theme: "HTML5全栈开发序列课程 《前端入门》之布局一 余鹏作品."— Presentation transcript:

1 HTML5全栈开发序列课程 《前端入门》之布局一 余鹏作品

2 主要内容 布局属性 float 浮动 clear 清除浮动

3 1、页面布局方式 页面布局方式，主要包含：文档流（常规流）、脱离文档流（浮动流）。 文档流：
文档流中元素框的位置由元素在HTML中的位置决定。块级元素从上到下依次排列，框之间的垂 直距离由框的垂直margin计算得到。行内元素在一行中水平布置。 文档流就是html文档中的元素如块级元素、行内元素依据他们的显示属性按照在文档中的先后次 序依次显示。块级元素就占一行或多行，行内元素就和其他元素共处一行，一个萝卜一个坑。 浮动流：元素从正常的排列顺序被抽离 浮动可以使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在正常文档流中，所以标准文档流中的块框表现得就像浮动框不存在一样。

4 2、浮动 浮动属性： float:left（向左浮动）/right（向右浮动）/none(默认值); float 属性定义元素在哪个方向浮动。通过float属性实现元素的浮动。 以往这个属性总应用于图像，使文本围绕在图像周围。 不过在 CSS 中，任何元素都可以浮动。 浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 浮动没有高度。

5 2.1、左浮动 第二个元素设置左浮动： .div2{ float:left; } 说明：
由于对div2设置浮动，它就不再属于标准流，div3自动上移顶替div2的位置，div1、div3、div4依次排列，成为一个新的流。 如果浮动前面的元素没有浮动属性，则浮动会另起一行在此元素的下面浮动。

6 2.1、左浮动 图文混排

7 2.2 右浮动 第二个元素设置右浮动： .div2{ float:right; } 说明：
div2{float:right;}当第二个模块设置为向右浮动，那么它就不属于标准流，而是成为了浮动流，剩下的div1，div3，div4重新排列 浮动元素不在标准文档流中，所以浮动后面紧跟着的元素占据了浮动元素原先的位置。 当一个元素浮动之后，其下方装载文字的容器虽然会占据浮动元素原先的位置，但是其中的文字会一直围绕在浮动元素周围，而不被浮动元素盖住。

8 2.2 右浮动 文字右侧显示

9 2.3 两个元素同时左浮动 第二个和第三个元素设置左浮动： .div2, .div3{ float:left; } 说明：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的， 那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)

10 2.3 两个元素同时左浮动 用于网页的导航 用于网页的布局

11 2.4 一个元素左浮动一个元素右浮动 说明： 主要应用于两列网页的布局 .div2{ float:left; } .div3{
float:right; 说明： 主要应用于两列网页的布局

12 2.4 一个元素左浮动一个元素右浮动 左浮动 右浮动

13 2.5 总结 浮动元素不在标准文档流中，所以浮动后面紧跟着的元素占据了浮动元素原先的位置。
浮动是个比较特殊的个体，它虽然不在标准文档流中，但是仍然跟标准文档流相互影响。 如果浮动前面的元素没有浮动属性，则浮动会另起一行在此元素的下面浮动。 当一个元素浮动之后，其下方装载文字的容器虽然会占据浮动元素原先的位置，但是其中的文字会一直围绕在浮动元素周围，而不被浮动元素盖住。

14 3、遇到问题？

15 3.1、浮动产生的副作用 1、背景不能显示：如果对父级设置了css背景或者背景图片，而父级不能被撑开，导致背景不能显示 2、边框不能被撑开
3、margain padding不能正确显示，特别是上下边的margin跟padding不能正确显示

16 3.2、清除浮动 清除浮动：clear:left/right/both/none; clear 属性规定元素的哪一侧不允许其他浮动元素。

17 3.3、其他清除浮动的方法 1.在父级元素添加最后一个子元素，子元素设置样式clear:both; 2.给父级元素设置高度 3.父级div定义overflow:hidden和zoom:1 4.设置:after伪元素 div:after{display:block;clear:both;content:"";} 为什么overflow:hidden可以清除浮动，因为这个属性相当于让父级紧贴其对象内容，包括使用float的div盒子，从而实现清除浮动。 Zoom是 ie浏览器的专有属性，他可以设置或者检索对象的缩放比例，除此之外，他还有一些小作用，出发ie的haslayout属性，清除浮动属性，清除margin重叠等等。经常跟overflow:hidden一起使用

18 育知同创：yztcedu.com HTML5全栈开发学习QQ群：