css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
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> <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)(另加两种清除浮动方式,总共三种清除浮动方式)的更多相关文章
- c#封装DBHelper类 c# 图片加水印 (摘)C#生成随机数的三种方法 使用LINQ、Lambda 表达式 、委托快速比较两个集合,找出需要新增、修改、删除的对象 c# 制作正方形图片 JavaScript 事件循环及异步原理(完全指北)
c#封装DBHelper类 public enum EffentNextType { /// <summary> /// 对其他语句无任何影响 /// </summary> ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- java:HTML(table表格,ul列表)和CSS(导入.css文件,三种定义颜色方式,三种样式选择器,a标签属性顺序,)
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- 三种方法为QLineEdit添加清除内容按钮
很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...
- Entity Framework关联实体的三种加载方法
推荐文章 EF性能之关联加载 总结很好 一:介绍三种加载方式 Entity Framework作为一个优秀的ORM框架,它使得操作数据库就像操作内存中的数据一样,但是这种抽象是有性能代价的,故鱼和熊掌 ...
- MyBatis 延迟加载的三种加载方式深入,你get了吗?
延迟加载 延迟加载对主对象都是直接加载,只有对关联对象是延迟加载. 延迟加载可以减轻数据库的压力, 延迟加载不可是一条SQL查询多表信息,这样构不成延迟加载,会形成直接加载. 延迟加载分为三种类型: ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
随机推荐
- 蓝灯(lantern)在服务器(vps)上运行
蓝灯(lantern)在无界面的linux下运行的时候,会遇到一个错误: error while loading shared libraries: libappindicator3.so.1: ca ...
- java转换unicode,筛选文件中的insert语句并把日期给转换为可以直接在数据库执行的语句
package com; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; impo ...
- [Machine-Learning] 熟悉 Numpy
Numpy 是 Python 中的一个模块,主要用于处理数学和计算相关的问题,这里是一个入门的介绍. 导入 习惯上可以这样导入: import numpy as np 在 machine learni ...
- 判断ie?
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javas ...
- Java-String类的常用方法总结
一.String类String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.java把String类声明的final类,不能有类.String类对象创建 ...
- Maven学习(一) -- 安装Maven及Eclipse中配置Maven
标签(空格分隔): 学习笔记 本文环境:Windows7, JDK1.7.0_76 安装及配置Maven环境变量 需要电脑中已经有Java环境 在控制台中输入:echo %JAVA_HOME%看是否能 ...
- Determining Current Block and Current Item in Oracle Forms
SYSTEM.CURSOR_BLOCK Determining current block in Oracle Forms Using SYSTEM.CURSOR_BLOCK system varia ...
- linux passwd文件解析
#cat/etc/passwd root:x:::Superuser:/: daemon:x:::Systemdaemons:/etc: bin:x:::Ownerofsystemcommands:/ ...
- 【java】定时器
总结 1.执行计划的任务放在TimerTask的子类中,由Timer进行该任务. 2.创建一个Timer就是启动一个新的线程,直至Timer里的任务执行完毕,才会结束.希望创建的线程为守护线程,则创建 ...
- Intellij自动下载导入框架包
忽然发现intellij尽然可以自动导入 框架所需的包,而且可以选择jar包版本,瞬间发现Maven,gradle管理jar包还得写配置文件弱爆了. 以Hibernate为例: 1.ProjectSt ...