浮动

把元素从常规文档流中取出。是元素脱离常规文档流

浮动的作用：

①实现文本绕排图片效果

②让原本在上下方向上堆叠的块级元素可以变成左右并列，从而实现多栏布局

文本绕排图片

首先HTML代码如下

<!DOCTYPE html>
<html>
<head>
    <title>浮动与清除</title>
    <meta charset="utf-8">
    <link href="in_css/floatandclear.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>文本绕排图片效果的实现</h1>
<img src="pic/myPic.jpg" >
<p>
    孙悟空是中国明代小说家吴承恩的著作《西游记》中的角色之一。<br>
    孙悟空，诨名行者，是唐僧的大徒弟，猪八戒、沙悟净的大师兄。会七十二变、腾云驾雾。<br>
    有一双火眼金睛，能看穿妖魔鬼怪的伪装；一个筋斗能翻十万八千里；使用兵器如意金箍棒，能大能小，<br>
    随心变化。他占花果山为王，自称齐天大圣，与如来佛祖斗法，被压在五行山下五百多年。<br>
    后经观世音菩萨点化，保护唐僧西天取经，历经九九八十一难，取回真经终成正果，被封为斗战胜佛。<br>
    代表了古代中国人善良、正义、不阿的情怀和追求。<br>
    孙悟空出生于东胜神洲傲来国花果山。感盘古开辟，三皇治世，五帝定伦，海外有一国土，名曰傲来国。<br>
    国近大海，海中有一座山，唤为花果山。此山乃十洲之祖脉，三岛之来龙，自开清浊而立，鸿蒙判后而成。<br>
    那座山正当顶上，有一块仙石。其石有三丈六尺五寸高，有二丈四尺围圆。三丈六尺五寸高，按周天三百六十五度；<br>
    二丈四尺围圆，按政历二十四气。上有九窍八孔，按九宫八卦。<br>
    出世
    盖自开辟以来，每受天真地秀，日精月华，感之既久，遂有灵通之意。<br>
    内育仙胞。一日迸裂，产一石卵，似圆球样大。因见风，化作一个石猴。<br>
    五官俱备，四肢皆全。便就学爬学走，拜了四方。目运两道金光，射冲斗府。
    <br>之后度过光景，因为成功闯入水帘洞，被花果山诸猴拜为“美猴王”。
</p>

</body>
</html>

CSS样式如下：

img{width: 200px;height: 200px}
P{margin: 0;border: 1px solid red;}
img{float: left;}

运行效果

从上图，我们可以看到图片浮动到了左侧，而文本绕排到右侧。当元素浮动了之后，浏览器会把它往上面推，直到它碰到父元素的内边界。而它后面的元素则不再认为浮动的元素在它前面。很显然如果想要创建多栏布局，只需要再一次浮动。我们现在就把p段落也浮动起来

p{width:500px;float:left;margin: 0;border: 1px solid red;}

由此可见：如果几个相邻的元素都有设定宽度，都是浮动并且水平空间足够容纳它们。它们就会并列排在一行，在就是利用float创建多栏布局的关键

三种围住浮动元素的方法：

首先修改下上面的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>浮动与清除</title>
    <meta charset="utf-8">
    <link href="in_css/floatandclear.css" rel="stylesheet" type="text/css">
</head>
<body>
<section>
<h1>文本绕排图片效果的实现</h1>
<img src="pic/myPic.jpg" >
<p>
    孙悟空是中国明代小说家吴承恩的著作《西游记》中的角色之一。<br>

</p>
</section>
<footer>
    位于页脚的说明文字
</footer>

</body>
</html>

CSS样式：

img{width: 200px;height: 200px}
section{border: 2px solid navy;margin: 0 0 30px 0}
p{margin: 0}
footer{border: 2px solid red}

下图是在常规文档流中的显示

图片浮动之后效果：

方法一：给父元素添加overflow:hidden

事实上overflow有两个作用

①防止包含元素被超大内容撑大

②迫使父元素包含其浮动的子元素

方法二：同时浮动父元素

下文待续

六.CSS浮动与清除的更多相关文章

  1. CSS 浮动和清除

    CSS 浮动和清除浮动 在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这 ...

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

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  3. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  4. css浮动与清除浮动

    css浮动 首先,我们要知道,css中块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常称为标准流. 以div为例,div是块级元素,如下: 可以清楚地看到,div是独占一行的,di ...

  5. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

  6. CSS浮动和清除

    float:让元素浮动,取值:left(左浮动).right(右浮动) clear:清除浮动,取值:left(清除左浮动).right(清除右浮动).both(同时清除上面的左浮动和右浮动) 1.CS ...

  7. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  8. CSS浮动和清除浮动

    1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...

  9. css浮动以及清除

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

随机推荐

  1. KVO机制

    KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用来监测对象的某些属性的实时变化情况并作出响应 首先,假设我们的目标是在一个UITableViewController内 ...

  2. 【6】连续序列和为s

    题目:输入一个整数s,打印出全部和为s的连续整数序列(至少含有2个数).比如输入9,则输出2.3.4和4.5两个序列 方案一:因为序列至少要2个数,则两个数上限值为(1+s)/2,我们能够枚举该序列的 ...

  3. linux 下使rdate命令支持ipv6 ntp server 同步时间

    如果使用linux 下,busybox自带的rdate命令 去ipv6 的ntp server 同步时间的话,会提示invalid argument :无效参数. 那么现在下载rdate的源码并对其进 ...

  4. Java组待开发的任务

    周枫: A.将digital,xylinkWeb修改为支持oracle版,并完成测试工作.准备好实施安装的步骤和每步需要的文件,比如发布的项目,tomcat,jdk,memcached,数据库等,在单 ...

  5. 【M17】考虑使用缓式评估

    1.缓式评估其实就是拖延战术,直到逼不得已的时候才去计算.缓式评估的使用场景有: 2.引用计数,考虑String,String是一个内含char指针(char指针以'\0'结束)的资源管理类,正常情况 ...

  6. Codeforces Educational Codeforces Round 3 E. Minimum spanning tree for each edge LCA链上最大值

    E. Minimum spanning tree for each edge 题目连接: http://www.codeforces.com/contest/609/problem/E Descrip ...

  7. Java中怎样由枚举常量的ordinal值获得枚举常量对象

    Java1.5提供了关键字enum,能够通过该关键字方便得定义自己须要的枚举类型,比方 enum Season { SPRING, SUMMER, AUTUMN, WINTER } 就定义了一个季节枚 ...

  8. Unity3d截图保存到Android相册的实现

    Unity3d截图保存到Android相册的实现-----------------------------ultrasoon 季风原创--------------------------------- ...

  9. [原创]-IIS7.5优化，支持同时10万个请求

    背景:        IIS7.5是微软推出的最新平台IIS,性能也较以前有很大的提升,但是默认的设置配不适合很大的请求.但是我们可以根据实际的需要进行IIS调整,使其性能更佳,支持同时10万个请求. ...

  10. 入门之--linux配置php

    [下载php源码]:从php的官方网站下载php的安装源码包. [解压安装包]:下载的安装包是经过压缩的gz格式,在linux可以使用自带的工具tar进行解压,在安装包所在目录执行命令:tar -zx ...