html清除浮动标签,页面布局的排列规则是什么？怎样清除浮动标签？

初学者在设计一个页面时，默认的排版方式是将页面中的标签从上到下一一罗列。例如，图1展示的就是采用默认排版方式的效果。

图 1 模块默认排列方式

通过这样的布局制作出来的页面布局参差不齐。然而大家在浏览网页时，会发现页面中的标签通常会按照左、中、右的结构进行排版，如图2所示。

图 2 模块浮动后的排列方式

通过这样的布局，页面会变得整齐有序。想要实现图2所示的效果，就需要为标签设置浮动属性。下面将对浮动属性的相关知识进行详细讲解。

1. 认识浮动

浮动是指设置了浮动属性的标签会脱离标准文档流(标准文档流指的是内容元素排版布局过程中，会自动从左往右，从上往下进行流式排列)的控制，移动到其父标签中指定位置的过程。作为CSS的重要属性，浮动被频繁地应用在网页制作中。在CSS中，通过float属性来定义浮动，定义浮动的基本语法格式如下。选择器{float:属性值;}

在上面的语法中，float常用的属性值有三个，具体如表1所示。

表1 float的常用属性值

2. 清除浮动

由于浮动标签不再占用原文档流的位置，所以它会对页面中其他标签的排版产生影响。例如，图8-7中的段落文本，受到其周围标签浮动的影响，产生了图文混排的效果。这时，如果要避免浮动对段落文本的影响，就需要在

标签中清除浮动。在CSS中，常用clear属性清除浮动。运用clear属性清除浮动的基本语法格式如下。选择器{clear:属性值;}

上述语法中，clear属性的常用值有三个，具体如表2所示。

表2 clear的常用属性值

需要注意的是，clear属性只能清除标签左右两侧浮动的影响。然而在制作网页时，经常会受到一些特殊的浮动影响，例如，对子标签设置浮动时，如果不对其父标签定义高度，则子标签的浮动会对父标签产生影响

受到子标签浮动的影响，没有设置高度的父标签变成了一条直线，即父标签不能自适应子标签的高度。由于子标签和父标签为嵌套关系，不存在左右位置，所以使用clear属性并不能清除子标签浮动对父标签的影响。那么对于这种情况该如何清除浮动呢?为了使初学者在以后的工作中，能够轻松地清除一些特殊的浮动影响，我们总结了常用的三种清除浮动的方法，具体介绍如下。

(1) 使用空标签清除浮动

在浮动标签之后添加空标签，并对该标签应用“clear:both”样式，可清除标签浮动所产生的影响，这个空标签可以是

、

等任何标签。

子标签浮动对父标签的影响已经不存在。需要注意的是，上述方法虽然可以清除浮动，但是增加了毫无意义的结构标签，因此在实际工作中不建议使用。

(2) 使用overflow属性清除浮动

对标签应用“overflow:hidden;”样式，也可以清除浮动对该标签的影响，这种方式还弥补了空标签清除浮动的不足。

子标签浮动对父标签的影响已经不存在。需要注意的是，在使用“overflow:hidden;”样式清除浮动时，一定要将该样式写在被影响的标签中。除了“hidden”，overflow属性还有其他属性值，我们将会在后面的小节中详细讲解。

(3) 使用after伪对象清除浮动

使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。使用after伪对象清除浮动时有以下注意事项。

● 必须为需要清除浮动的标签伪对象设置“height:0;”样式，否则该标签会比其实际高度高出若干像素。

●必须在伪对象中设置content属性，属性值可以为空，如“content: "";”。

html清除浮动标签,页面布局的排列规则是什么？怎样清除浮动标签？相关推荐

html中左右浮动怎么写,css 浮动(float)页面布局
[第一步整体布局与公共CSS定义]我们先来分析一下这个页面页面主要分5大块,顶部的Logo.导航条Nav.Banner.Content.Footer,如下图下载 (116.12 KB) 2009 ...
CSS页面布局之盒子模型
目录 1 盒子模型 1.1 看透网页布局的本质 1.2 盒子模型组成 1.3 边框(border) 1.4 表格的细线边框 1.5 边框会影响盒子实际大小 1.6 内边距(padding) 案例:新浪 ...
CSS盒子模型/页面布局
1.盒子模型页面布局要学习三大核心,盒子模型,浮动和定位.学好盒子模型对我们布局页面帮助很大! 1.1看透网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子利用CSS设置 ...
表单设计中标签的布局方式有哪些
表单设计的标签本质上是一个与用户对话的起点,了解表单设计的标签的设置规则后,需要关注标签的布局方式,因为网页表单设计是影响用户如何回答问题的关键.表单设计标签的布局方式主要包含三种,测试数据展示,用户 ...
一个简单的blog系统（九）增加标签和标签页面
一个简单的blog系统(九) 增加标签和标签页面 1.现在,我们来给博客添加标签和标签页面. 假定每篇文章最多只有两个标签,当单机主页左侧标签页链接的时候,跳转到标签页并且列出所有已经有的标签,当单击 ...
CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即"块级格式化上下文", IFC(Inline Formatting Co ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...
目录一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题自己自述一遍不会再看答案）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...

html清除浮动标签,页面布局的排列规则是什么？怎样清除浮动标签？

html清除浮动标签,页面布局的排列规则是什么？怎样清除浮动标签？相关推荐

最新文章

热门文章