CSS学习笔记08 浮动

CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样

应用display属性的inline属性可以让div与div共享一行,除了这种方法外,还有没有其他方法可以实现这种效果呢,答案是肯定的,那就是下面要介绍的CSS的浮动特性,浮动从字面意思上来看,就是浮起来,动起来,那么是谁浮起来,又是谁动起来呢?往下看,很快就会知道答案了。

元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制,漂浮在标准流之上。元素浮动后,虽然脱离标准流,但还是会影响标准流的布局。

在CSS中,通过float属性来定义浮动,其基本语法格式如下:选择器{float:属性值;},默认值为none(不浮动),另外用left表示左浮动,可以理解为漂浮起来后靠左排列,right表示右浮动,自然的就是靠右排列。

现在我们给div2设置浮动,看看会出现什么效果

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动</title>
 6     <style type="text/css">
 7         .div1 {background-color: red; height: 50px; width: 400px;}
 8         .div2 {background-color: blue; height: 100px; width: 100px; float: left;}
 9         .div3 {background-color: gray; height: 150px; width: 400px;}
10         .div4 {background-color: green; height: 30px; width: 600px;}
11     </style>
12 </head>
13 <body>
14     <div class="div1">div1</div>
15     <div class="div2">div2</div>
16     <div class="div3">这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3这是div3</div>
17     <div class="div4">div4</div>
18 </body>
19 </html>

这时候div2的位置并没有变化,而div3向上移动了,与div2共用一行,相当于div2不占用页面的空间了,不过影响了div3中的文字布局。从这里也可以清楚的看出,是浮动的对象div2先漂浮起来,然后后面的对象div3会向它原来的位置动起来,这也解答了刚开始提出的问题。

浮动是将块元素独占一行的行为取消,将这个块从原来的文档流模式中,可以理解为它飘起来了,它原来的地方就空出来了,它的内容分离出来,这样它后面的对象就当它不存在了。

接下来给div3也设置一下浮动,会有什么意想不到的结果出现吗?

这时,由于div2与div3同时设置了浮动,所以都脱离了标准流,因此div4向上移动与div1组成了一个新的标准流,而浮动的元素是“浮”在标准流的元素之上的,所以div4被div2,div3挡住了一部分。

从上面的现象可以看出,给div3设置浮动之后,div3是紧接着跟在div2后面的,但是div2也是设置了浮动的,可是div2并没有跟在div1后面,这里可以得出一个结论:

浮动的元素A排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐(也就是紧挨着上一个元素的后面),如果一行放不下,A元素则会被挤到下一行;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。

假如把div4也设置成左浮动,效果如下

我们来一起分析一下,首先看div4,它的上一个元素div3设置了左浮动,所以div4的顶部与div3的顶部对齐,接着看div3,div3的上一个元素div2也设置了左浮动,所以div3的顶部与div2的顶部对其,现在看div2,div2的上一个元素是div1,但是div1并没有设置浮动属性,属于标准流,所以div2的顶部与div1的底部对齐。

或许有人会想如果要让div4独占一行,该怎么办?这就需要用到CSS的清除浮动,清除浮动的关键字是clear,它有如下几个值

再来看div2设置左浮动的现象

因为div3的上一个元素div2设置了左浮动,所以div3占据了元素div2的空间,因为div3的宽高比div2的宽高都大,所以div3被div2挡住了一部分,我们知道标准流中的元素都是没有设置浮动属性的,所以需要清除掉div2元素浮动给div3造成的影响,由于div2是左浮动,因此为div3清除左边的浮动

现象与原来没有设置浮动一样,好,现在div2与div3同时设置左浮动,我想应该可以比较容易的知道如何让div4独占一行了。

清除浮动其他属性值可以自行类推并测试出来。有了上面的基础,我们就可以做出以下比较常见的网页布局。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>常见布局</title>
 6     <style type="text/css">
 7         .head {background-color: red; height: 50px; width: 500px;}
 8         .sidebar {background-color: blue; height: 200px; width: 100px; float: left;}
 9         .main {background-color: gray; height: 200px; width: 400px; float: left;}
10         .foot {background-color: green; height: 30px; width: 500px; clear: left;}
11     </style>
12 </head>
13 <body>
14     <div class="head">head</div>
15     <div class="sidebar">sidebar</div>
16     <div class="main">main</div>
17     <div class="foot">foot</div>
18 </body>
19 </html>

时间: 2024-10-12 12:35:06

CSS学习笔记08 浮动的相关文章

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

C++ GUI Qt4学习笔记08

C++ GUI Qt4学习笔记08 qtc++signal图形引擎文档 [html] view plaincopy 本章介绍Qt的二维图形引擎,Qt的二维图形引擎是基于QPainter类的.<span style="color:#ff0000;">QPainter既可以绘制几何图形(点.线.矩形等),也可以绘制像素映射.图像和文字.此外QPainter还支持一些高级特性,例如反走样.像素混合.渐变填充和矢量路径等.QPainter也支持线性变换,例如平移.旋转.错切和缩放.