在写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流,按照指定的方向(左或右发生移动),直到 ...
转 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div 的宽度很小,页面中一行可以容下div 和div ,div 也不会排在div 后边,因为div元素是独占一行的。 注意,以上这些理论,是指标准流中的div。无论多么复杂的布局,其基本出发点均是: 如何在一行显示多个div元素 。 显然标准流已经无法满足需求,这就要用到浮动。浮动可以理 ...
2013-03-27 15:44 20 29822 推荐指数:
在写页面布局的过程中,浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流,按照指定的方向(左或右发生移动),直到 ...
文档流 css中的块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常我们称之为文档流或标准流。 浮动 使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。起初,W3C规定出来的浮动实际并不是为了布局 ...
1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性,就会变成块级标签。 2.清除浮动clear属性 (1)利用伪元素具有clear清除浮动的属性来解决父标签塌陷 ...
1、标准流(普通流/文档流) 标准流就是标签按照规定好的默认方式排列 (1)块级元素会独占一行,按照从上到下的方式排列 (2)行内元素会按照顺序,从左到右的顺序进行排列,遇到父元素则自动换行 (3)纵向排列标准流,横向排列用浮动 2、浮动的简单应用 (1)让多个块级元素水平排列 ...
浮动 普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以。 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置? CSS的定位机制有3种:普通流(标准流)、浮动和定位。 html语言当中另外一个相当 ...
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1、分行、块级元素,并且能够dispay转换。 2、块级元素(block):默认独占一行,不能并列显示,能够设置宽、高,宽度为父盒子的100%。例如:div、p、标题元素(h1-h6)、列表元素 ...
CSS(6)---通俗讲解浮动(float) CSS有三模块:盒子模型、浮动 、定位。上篇博客有讲到 盒子模型地址:CSS(5)---通俗讲解盒子模型 一、理解浮动 1、概念 概念 浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。 如果是 ...
通俗讲解清除浮动 上一篇讲了CSS浮动 博客地址:CSS(6)---通俗讲解浮动(float) 一、理解清除浮动 1、为什么要清除浮动 我们前面说过,浮动本质是用来做一些文字混排效果的,但是被我们拿来做布局用,则会有很多的问题出现。 由于浮动元素不再占用原文档流的位置 ...