css div float属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css" >

div#test1

{

float:left;

background-color:blue;

width:200px;

height:200px;

border:1px solid black;

}

div#test2

{

background-color:red;

width:200px;

height:200px;

border:1px solid black;

}

div#test3

{

background-color:yellow;

width:200px;

height:200px;

border:1px solid black;

}

</style>

</head>

<body>

<div id="test1">

</div>

这是一个段落

<div id="test2">

</div>

</body>

</html>

这种情况下test1将覆盖test2;

如果在文档流中将test2放在前面,则test2将不会被覆盖,test1显示在test2的下面。

时间: 2024-12-19 04:58:08

css div float属性的相关文章

CSS浮动(float)属性学习经验分享

作为一名前端开发的初学者,CSS的布局定位无疑成为了一个难点,这两天通过看一些博客的技术分享和自己的反复实践,大概领悟到了一些float的“门道”. 下面就通过一些例子来归纳总结一下我所学到的浮动特性: (一)浮动元素对其兄弟元素是标准流元素的影响: 现在假定HTML文档中从上到下有3个块元素A.B.C 1.现设定A.C为标准流中的元素,B设为float:left (注:为了更直观地显示,设B的透明度为0.5,B是在C上方的) 由此可见:将B设为浮动元素后,B脱离了标准文档流,浮于其上方,因此他

css中float属性和position

css中float属性: float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 默认值: none 继承性: no 版本: CSS1 JavaScript 语法: object.styl

CSS之float属性

float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素:有空隙就插入. 1.3 floa

(十一)学习CSS之float属性

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

css+div常用属性备忘录

上大学学习软件设计有一年多了,明年五月就要毕业了.回头看看发现自己其实挺差劲的,不能因为在一群不学习的人中就觉得自己多厉害.其实自己也是个废物呢:) 最近开通了博客所以就整理了一下笔记,在这里发布一下自己以前学习css时总是记不住去翻书又很常用的属性,都是一些很基础的,大神轻喷.很适合初学者多看看. 只做了一点微小的工作 :) 2333 float 方块-浮动 text-decoration 字体效果 letter-spacing 字母间隔 line-height 行高 text-align 区

CSS 浮动 float 属性

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

CSS float属性

抓的别人的,没有看完,先保留下来好了,感觉挺好的,毕竟刚刚接触.... 详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样.浮动的元素仍然是网页流的一部分.这与使用绝对 定位的页面元素相比是一个明显的不同.绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样.绝对定位的元素

CSS之float

在 HTML中的所有对象,默认分为两种:块元素(block element).内联元素(inline element),虽然也存在着可变元素,但只是随上下文关系确定该元素是块元素或者内联元素. 其实CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式.block对象设置了float属性之后,它将不再独自占据一行.可以浮动到左侧或右侧. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流

CSS之float的那些事

相信很多同学在学习CSS的float属性时,会有很多说不清道不明的小情绪,我也遇到一些,暂且mark一下. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮动的方法 3.1:html法 3.2:css伪元素法 4:float去空格化 5:float元素块状化 6:float流体布局     6.1:单侧固定 6.2:DOM与显示位置不同的单侧固定 6.3:DOM与显示位置相同的单侧固定