浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘.因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失. 如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到…

CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素. (2)网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域. 当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position.float.display来控制.默认情况下,所有元素都处在文档流中,四种情况将使得元…

前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一行,并在每行中按从左到右的顺序排放元素.(2)网页中大部分对象默认是占用文档流,也有一些对象是不占文档流的,比如表单中隐藏域. 当然我们也可以让占用文档流的元素转换成不占文档流,这就要用到CSS中属性position.float.display来控制.默认情况下,所有元素都处在文档流中,四种情况将使…

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素…

参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 值 描述…

在web标准的网页中,页面各个元素都是以标准流的方式来进行布局的.即块元素占满指定的宽度,不指定宽度则占满整行(如<p>.<div>元素),内联元素则是在行内一个接一个的从左到右排列(如<a>.<span>元素).这种默认的布局方式使用起来简单,但也带来很大的局限,只能从上到下显示内容,无法实现图文环绕混排的效果:无法实现两列或者多列的布局,不能很好的利用页面空间.其实要实现上述的复杂效果,我们可以借助CSS提供的float属性. 标准流代码 <!DO…

float浮动属性1.作用: 将页面元素浮动起来,使其能够向左或者向右排列 2.应用: 实现页面中布局的左右排版 实现图文环绕的版式效果 3.值: 4.原理: 浮动元素将脱离默认的文档流,漂浮在默认文档流之上 浮动的元素会向左或向右移动,直到它的外边缘碰到父级元素或这个元素之前的另一个浮动元素的边框为止 普通文档流可以看作是一个X.Y轴的平面流,float浮动流可以看到是一个Z轴上的立体流,Float浮动流离眼睛更近,在普通文档流之上 5.特点: 对齐方式 不管元素如何浮动,始终以父级容器或它前…

一.什么是浮动? 浮动,顾名思义,就是漂浮的意思.指的是一个元素脱离文档流,悬浮在父元素之上的现象. 二.如何产生浮动? 给元素本身添加float属性 float值: left 元素向左浮动. right 元素向右浮动. none 默认值.元素不浮动,并会显示在其在文本中出现的位置. inherit 规定应该从父元素继承 float 属性的值. 三.浮动有什么作用? 作用:在html文档流中,分为行元素.块元素和行内块元素, 行元素和行内块元素都是以横向排列的,而块元素则是以流的形式从上往下排列…

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的. 注意,以上这些理论,是指标准流中的div. 小菜认为,无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”. 显然标准流已经无法满足需求,这就要用到浮动. 浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次. 例如,假设上图中的…

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下…