<!DOCTYPE html>

<html>

<head>

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

<title>清除浮动clear-left-right-both-none效果</title>

<style type="text/css" >

.container{

	height:200px;

	width:400px;

}

.f_left,.f_right{

	float: left;

	width:80px;

	height:80px;

	background-color:#ccc;

	border:1px solid #666;

	font-size:13px;

	color:#444;

}

.f_right{

	float: right;

}

</style>

</head>

<body>

	<div class='container'>

		<div class='f_left'>

			float: left;【1】

		</div>

		<div class='f_left'>

			float: left;【2】

		</div>

		<div class='f_left' style='clear:left;'>

			clear:left;不允许左边有浮动，于是就掉下来，到了第二行【3】

		</div>

	</div>

	<div class='container'>

		<div class='f_left'>

			float: left;【1】

		</div>

		<div class='f_right'>

			float: right;【2】

		</div>

		<div class='f_left' style='clear:right;'>

			clear:right;不允许右边有浮动，于是就掉下来，到了第二行【3】

		</div>

	</div>

	<div class='container'>

		<div class='f_left'>

			float: left;【1】

		</div>

		<div class='f_left'>

			float: left;【2】

		</div>

		<div class='f_right'>

			float: right;【3】

		</div>

		<div class='f_left' style='clear:both;'>

			clear:both;不允许左右两边浮动，于是掉下来，到了第二行【4】

		</div>

	</div>

	<div class='container'>

		<div class='f_left'>

			float: left;【1】

		</div>

		<div class='f_right'>

			float: right;【2】

		</div>

		<div class='f_left' style='clear:none;'>

			clear:none;不清除浮动，此元素可以贴近浮动元素【3】

		</div>

	</div>

</body>

</html>

清除浮动clear-left-right-both-none效果的更多相关文章

  1. CSS 清除浮动 clear 属性

    CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...

  2. 清除浮动clear/BFC

    浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level ...

  3. 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both

    1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...

  4. css 清除浮动 clear

    .clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...

  5. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  6. css 盒模型 文档流 几种清除浮动的方法

    盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border   content-box:此值为其默认值,其 ...

  7. CSS——如何清除浮动

    众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...

  8. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  9. CSS浮动和清除浮动

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

  10. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

随机推荐

  1. Windows 下 MongoDb 简单配置

    以管理员的启动cmd        进入安装目录下                      输入:  mongod  --auth --port 3406  --dbpath=库地址  --logp ...

  2. .NET中的程序集

    参考:http://blog.sina.com.cn/s/blog_7ade159d0102wmg9.html 程序集(Assembly,装配件,.NET程序集) 程序集是应用程序的部署单元,.NET ...

  3. ERC230 VS ERC223

    ERC223对ERC220的改进 ERC223是以太坊上最新的代币(token)接口标准,主要是为了解决ERC220代币转账丢失问题,那么怎么解决的呢,一起来看看. 1. ERC220 存在问题 ER ...

  4. 《C#多线程编程实战》2.7 CountDownEvent

    这个同步线程的类大概是东北的. 很有意思. 会限定你的线程使用的次数,更形象一点的像是你妈,提前准备好你要使用的线程的次数,用不完还不高兴那种的. 使用顺序基本就是 实例化  填充线程的启动次数 使用 ...

  5. HDU6330-2018ACM暑假多校联合训练Problem L. Visual Cube

    就是画个图啦 分三个平面去画orz #include <iostream> #include <cmath> #include <cstring> #include ...

  6. WebApplicationContext wac=WebApplicationContextUtils.getWebApplicationContext(this.getServletContext());这句话的意思

    在jsp中出现 提取的代码: <%   WebApplicationContext wac = WebApplicationContextUtils     .getWebApplication ...

  7. PHP简单实现一言 / 随机一句功能

    很多网站都喜欢在页面中加个一言,不过一般都是调用的第三方api.其实,使用万能的php能用短短的几行代码就实现该功能! 将下列代码复制并粘贴到 api.php 中保存,你的专属“一言” API 就搭建 ...

  8. Centos7服务器启动jar包项目最佳方式

    jar后台运行:nohup java -jar xx.jar >/dev/null & 此处的“>/dev/null”作用是将终端输出信息输出到空洞中,即不保存输出信息,若要查看输 ...

  9. 使用带参数的SQL语句向数据库中插入空值

    private void button1_Click(object sender, EventArgs e) { string name = textBox1.Text; int age = Conv ...

  10. list和tuple

    1. 列表--list 列表用[]表示 l=[1,2,3,'zs'] print(l) 输出:[1,2,3,'zs'] 1.利用下标获取列表元素,下标从0开始 print(l[3]) 输出:zs pr ...