关于浮动与清除浮动

页面布局方式,主要包含:文档流、浮动层、float属性。

?html页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行。

?浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。

?float属性包括left(元素向左浮动)、right(元素向右浮动)、 none(默认值)、(inherit)从父元素继承float属性。

但是浮动有时候会很烦,为什么说很烦呢?

举个栗子吧

浮动对页面的影响:如果一个父盒子中有一个子盒子,并且父盒子没有设置高度,子盒子在父盒子中浮动,因为float会脱离文档流,这样就导致了父元素的height为0 ,下面的元素会自动补位。故需要进行清除浮动。

清楚浮动的方式有很多种,那就总结一下吧

1、使用额外标签法:在浮动盒子下面添加一个标签,使用clear:both来清楚浮动

这里我们发现很明显的缺点:父盒子还是不会直接显示,而且这种浮动方式会增加页面的标签<div class="clearfix"></div>,故一般情况下不采用这种清楚浮动方式

2、使用CSS的:after伪元素

说明:给浮动元素的容器添加一个clearfix的class类,然后给这个class添加一个:after伪元素实现元素末尾添加一个空的块级元素(这个元素的高为0,行高也为0,并且这个元素清楚了浮动) 。为了IE6和IE7浏览器,要添加一条zoom:1;触发haslayout。

3、使用CSS的overflow属性

先找到浮动盒子的父元素,再在父元素添加添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。

注意:一般情况下也不使用这种清楚方式,因为overflow:hidden有一个属性,离开了这个元素所在的区域以后会被隐藏

综上所述:还是使用CSS的:after伪元素是最佳选择

关于浮动更多内容可以参考http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html

时间: 2024-10-22 17:03:51

关于浮动与清除浮动的相关文章

css浮动和清除浮动

浮动存在的原因 在word排版中,文本可以环绕图片.在css中,想要实现文字环绕的效果,只能借助于float,没有其他的替代方式.在实际中,文档的布局经常会使用浮动. float属性 float属性,默认为none,也就是标准流通常的情况.如果将float的属性的值设置为left或right,元素就会向其父元素的左侧或右侧紧靠. inherit表示从父元素继承float属性的值. clear属性 clear 属性定义了元素的哪边上不允许出现浮动元素.在 CSS1 和 CSS2 中,这是通过自动为

CSS浮动与清除浮动(overflow)例子

在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧. float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神奇,于是乎就去问了师匠: Normal flow is the way that elements are displayed in a web page in most circumstances. All elements in HTML are inside boxes which are e

CSS中的浮动和清除浮动,梳理一下!

CSS中的浮动和清除浮动,梳理一下! 第一篇就整理整理CSS中很常见的浮动以及清除浮动的一些方式吧. 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果 但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场景.

关于浮动与清除浮动,你应该知道的

我在做页面布局的时候,多多少少总会受到来自浮动的困扰,因此专门通过实践来总结一下浮动与清除浮动. 首先总结几个基础的概念: 浮动:设置浮动的元素会脱离文档流,不会影响块元素的布局,但是会影响内联元素的排列[通常是文本]: 文档流:在文档流中,块元素会单个元素独占一行 接下来我们通过实际演示来看看关于浮动的那些事儿. 下面是5个div块元素在文档流中一次排列 我们知道浮动元素有几个规律 如果浮动元素的上一个元素也是浮动,那么该元素会与上一个元素排列在同一行,如果行宽不够,后面的元素会被挤到下一行

css中元素的浮动和清除浮动的影响

用float属性可以使元素浮动到包含框内的左右边使文本围绕它,这里创建一个包含框内有段落和一个小的div并被包围: <html> <head> <title><title> <style type="text/css"> div{ border:1px solid red; width:200px; height:200px; } .div1{ background-color:yellow; float:right; wid

css 的定位,浮动和清除浮动——浅析

在下才疏学浅,不足之处,还请多多指教. 定位有这五种: 常用的是前三种,接下来上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ padding: 100px 100px; position: relative; width: 35

标准文档流.浮动以及清除浮动(学习笔记)

标准文档流 1.当后面空间不够时,会空白折叠,自动换行. 2.当高矮不齐时,会底部对齐. 3.自动换行. 标签根据显示的内容划分成:文本级,容器级. 按照文档流划分:块级元素.行内元素; 块级元素: (1).霸占一行,不能与其他任何元素并列. (2)能接受宽高. (3).如果不设置宽度,那么宽度将默认变为父亲的100%. 行内元素: (1).与其他行内元素并排; (2)不能设置宽高.默认宽度就是文字宽度. 所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素. 所有的容器级标签

css浮动及清除浮动

1. 浮动 1. 特点: 1.不占原来的位置(脱标) 2.可以让块级元素在一行上显示 3.浮动可以把行内元素转化为行内块元素 2 清除浮动 清除浮动指的是清除浮动的影响 注意: 当子元素设置了浮动,父元素没有高度的时候,造成页面布局混乱.这种情况下进行清除浮动. 3  清除浮动的几种方式 1.使用clear:left|  right  | both Clear:both; 这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清楚浮动,空标签可以是div标签,也可以是P标签等,并