<!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. 让IE播放PPT

    在win7下安装office 2003,想让ppt在ie里播放,然后供winform调用,显示并播放ppt,操作如下 HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Power ...

  2. ARKit入门

    ARKit介绍 ARKit是iOS11引入的一个全新的框架,使用Visual Inertial Odometry(VIO,视觉惯性里程计)来精确跟踪现实世界中的真实场景.相比其它设备平台,ARKit中 ...

  3. PHP+JQuery实现ajax跨域

    jQuery实现ajax跨域 1.dataType:'jsonp'2.type: 'get'3.把要传的参数以url方式传出去  url:'http://gameapi.feiliu.com/lqzg ...

  4. MultiDataTrigger

    MultiDataTrigger是多条件数据触发器 和MltiTrigger是同样的,只不过前者是数据,后者是属性. 这个是基本的使用语法 <MultiDataTrigger> <M ...

  5. 3人从小公寓创业，到世界最大引擎公司，Unity创始人谈14年...

    Unity创始人David Helgason出席了5月11 - 13日在上海举办的Unite 2017 Shanghai,并在大会期间接受了游戏陀螺的专访,动情地讲述了这14年来从3人在公寓创业,到成 ...

  6. OC 术语表

    术语表 本附录包含了很多会用到的非正式定义术语.有些术语与Obective-C语言有关,其他术语则有自己的语源,来自面向对象程序设计的规范.在后一种情况中,术语的含义只有明确应用于Obective-C ...

  7. 将php命令加入cenos环境变量

    0.修改/etc/profile文件使其永久性生效,并对所有系统用户生效,在文件末尾加上如下两行代码 1.PATH=$PATH:/usr/local/webserver/php/bin:/usr/lo ...

  8. 关于logging的那些坑

    python的logging日志记录模块非常强大,使用也很简单,但是特别容易出各种意外状况,打印各种出乎意料的log.最近对logging的一些原理进行了学习,再此做个记录,以备忘. 首先全面的了解一 ...

  9. Qt 学习之路 2（51）：布尔表达式树模型

    Qt 学习之路 2(51):布尔表达式树模型 豆子 2013年5月15日 Qt 学习之路 2 17条评论 本章将会是自定义模型的最后一部分.原本打算结束这部分内容,不过实在不忍心放弃这个示例.来自于 ...

  10. Windows10 下安装 MySQL Workbench + Thinkphp

    昨天,搭建了最基本的 W + I + M + P 环境,今天把 workbench 装上,毕竟效率是第一位的,还不是吾装的时候. MySQL.org 下载最新的 workbench,一路安装倒是没有任 ...