css浮动（float）

　　float是css样式，用于设置标签的居左浮动和居右浮动，浮动后的元素不属于html文档流，需要用清除浮动把文档拽回到文档流中

浮动值：

　　left：向左浮动

　　right：向右浮动

html文档流：自窗体自上而下分成一行一行，并在没行中从左到右的顺序排放元素。

　　通过例子来解释浮动

1.页面上有两个块元素，每个块元素独占一行

2.我们希望他们能并排显示，这是就可以使用float，我们先给红色的div加float：left，发现两个是在一行了，但是他们重叠在了一起。

3.这是因为加了float的元素不会消除独占一行的特性，而且还会“飘”在其他元素之上

4.我们蔚蓝色的div也加上float，这时正常了，两个div显示在了一起。

如下：

　　结尾处加空div标签 clear的方式清除浮动

　　a。刚才的例子已经完成了并排布局，这时我需要加第三个块元素，起名d3，这时发现，d3是被压在了前两个块元素之下

　　b。刚才说过，加了float的元素会飘在其他元素之上，实际上时因为他们已经不属于html 正常的文档流了，后面再有多少个元素和它无关，他始终飘在上面。

　　c。我们只想让他不独占一行，并没有想让他不属于文档流。所以可以动用clear：both把float元素拽回文档流。

示例：

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{width: 200px; height: 200px;}
.d1{background: red; float: left;}
.d2{background: blue; float: left;}
.d3{background: green; width: 500px; height: 500px;}

.clear{clear: both; width: 0px; height: 0px;}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="clear"></div>
<div class="d3"></div>
</body>
</html>

显示如下：（没截完）

练习

用float完成百度热映电影的布局：

练习如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style type="text/css">
.Myleft{float: left; width: 270px;}
.Mright{float: left;}
.clear{clear: both; height: 0px;}

a{text-decoration: none;}
h3 a i{font-style: normal; color: red;}
h3 a{line-height: 35px; font-size: 20px; font-weight: normal; border-bottom: 1px solid blue;}
h4{font-size: 25px; font-weight: normal;}
h4 span {color: #388bff; font-size: 30px; line-height: 50px;}

.mylink{background: url("img/QQ截图20161220222807.png") no-repeat right center; width: 140px;}
.mylink{color: #87b6b1;}
</style>
</head>
<body>
<h3><a href="#"><i>赏金猎人</i>_高清视频在线观看_乐视网</a></h3>
<div class="cont">    <!-- container缩写cont，意思是内容（大的div一般这样命名-->
<div class="Myleft">
<img src="img/fdf1e1eecbcfd96d-802f56c62cb41c07-7e37d902a74948c41364ba0d1ccccaee.jpg" alt="哈哈哈" height="160px" width="250px" />
</div>
<div class="Mright">

<h4>还有<span> 2 </span>天上映</h4>
<p>上映日期：2016年上映</p>
<p>导演：<a href="#">申太罗</a></p>
<p>主演：<a href="#">李敏镐</a>&nbsp;<a href="#">钟汉良</a></p>
<p>类型：动作</p>
<p class="mylink">v.baidu.com <a href="#"><img src="img/QQ截图26.png"/></a></p>
</div>
<div class="clear"></div>
</div>
</body>
</html>

显示如下：

css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）的更多相关文章

  1. c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合，找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理（完全指北）

    c#封装DBHelper类   public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...

  2. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  3. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  4. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  5. 三种方法为QLineEdit添加清除内容按钮

    很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...

  6. Entity Framework关联实体的三种加载方法

    推荐文章 EF性能之关联加载 总结很好 一:介绍三种加载方式 Entity Framework作为一个优秀的ORM框架,它使得操作数据库就像操作内存中的数据一样,但是这种抽象是有性能代价的,故鱼和熊掌 ...

  7. MyBatis 延迟加载的三种加载方式深入，你get了吗？

    延迟加载 延迟加载对主对象都是直接加载,只有对关联对象是延迟加载. 延迟加载可以减轻数据库的压力, 延迟加载不可是一条SQL查询多表信息,这样构不成延迟加载,会形成直接加载. 延迟加载分为三种类型: ...

  8. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

  9. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

随机推荐

  1. HAL驱动库学习--如何使用HAL库

    一 概述 下图是表述了用户层和HAL_Driver的交互过程,基本上从用户APP调用HAL_Driver APIs并且视情况当使用DMA或者专用中断时通过中断处理程序调用HAL_Driver APIs ...

  2. RF《Quick Start Guide》操作总结

    这篇文章之所以会给整理出来,是因为学了一个季度的RF后,再去看官网的这个文档,感触破多,最大的感触还是觉得自己走了不少弯路,还有些是学习方法上的弯路.在未查看这类官网文档之前,更多的是看其他各种人的博 ...

  3. Linux基础命令介绍七：网络传输与安全 wget curl rsync iptables

    本篇接着介绍网络相关命令:wget 文件下载工具.curl 网络数据传输工具.rsync 文件传输工具等. 本篇接着介绍网络相关命令 1.wget 文件下载工具 wget [option]... [U ...

  4. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

  5. win7 APPCRASH问题解决！

    真是废了老劲了..什么清理插件,各种运行msconfig/启动都试了 问题:**.exe已停止工作 问题事件名称: APPCRASH 应用程序名: compute_image_mean.exe 应用程 ...

  6. JSON上

    关于JSON部分: 目录: 一:定义二:实例三:JSON的语法 一:什么是JSON? 1.JSON:JavaScript 对象表示法(JavaScript Object Notation). 2.JS ...

  7. Hadoop安装指引

    pre.ctl { font-family: "Liberation Mono", monospace } p { margin-bottom: 0.25cm; line-heig ...

  8. 【Spring】Junit加载Spring容器作单元测试

    如果我们需要对我们的Service方法作单元测试,恰好又是用Spring作为IOC容器的,我们可以这么配置Junit加载Spring容器,方便做单元测试. > 基本的搭建 (1)引入所需的包 & ...

  9. Maven学习（二） -- 坐标和依赖

    标签(空格分隔): 学习笔记 坐标 实际就像在几何中,我们用一对坐标(x, y)来表示坐标系中唯一的点:或者我们可以用(经度,纬度)来表示地球上的某一个位置,在Maven的世界中,有坐标来唯一的表示项 ...

  10. 《BI那点儿事》数据流转换——OLE DB 命令转换

    OLE DB命令对数据流中的数据行执行一个OLE DB命令.它针对数据表中的每一行进行更新操作,可以事先将要更新的数据存放在表中.或者针对一个有输入参数的存储过程,可以将这些参数存放在一个数据表中,不 ...