<!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. WPF 控件库——仿制Chrome的ColorPicker

    WPF 控件库系列博文地址: WPF 控件库——仿制Chrome的ColorPicker WPF 控件库——仿制Windows10的进度条 WPF 控件库——轮播控件 WPF 控件库——带有惯性的Sc ...

  2. Task async await

    暇之余,究多Task.async.await. using System; using System.Collections.Generic; using System.Linq; using Sys ...

  3. 「BZOJ 5188」「Usaco2018 Jan」MooTube

    题目链接 luogu bzoj \(Describe\) 有一个\(n\)个节点的树,边有权值,定义两个节点之间的距离为两点之间的路径上的最小边权 给你\(Q\)个询问,问你与点\(v\)的距离大于等 ...

  4. eclipse操作

    1.手动添加组件源码 2.源码阅读技巧 选择类Ctrl+T(Quick Type Hierarchy),查看该类的继承关系: 选择方法Ctrl+Alt+H(Open Call Hierarchy),查 ...

  5. 【ARC069F】Flags 2-sat+线段树优化建图+二分

    Description ​ 数轴上有 n 个旗子,第 ii 个可以插在坐标 xi或者 yi,最大化两两旗子之间的最小距离. Input ​ 第一行一个整数 N. ​ 接下来 N 行每行两个整数 xi, ...

  6. 51nod1228 序列求和（伯努利数）

    题面 传送门 题解 \(O(n^2)\)预处理伯努利数 不知道伯努利数是什么的可以看看这篇文章 不过这个数据范围拉格朗日差值应该也没问题--吧--大概-- //minamoto #include< ...

  7. 洛谷P1640 [SCOI2010]连续攻击游戏（二分图）

    题目描述 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并且每种装备 ...

  8. python 第三次作业

    习题1: **1.初始化一个数据集,包括5-10位同学的成绩数据(数据类型不限),数据格式如下: **学号 姓名 Java C语言 Python 2017XXXX 小白 87 68 92 2017XX ...

  9. SQLServer如何清除缓存?

    --1. 将当前数据库的全部脏页写入磁盘.“脏页”是已输入缓存区高速缓存且已修改但尚未写入磁盘的数据页. -- CHECKPOINT 可创建一个检查点,在该点保证全部脏页都已写入磁盘,从而在以后的恢复 ...

  10. P2050 [NOI2012]美食节（费用流）

    P2050 [NOI2012]美食节 P2053 [SCOI2007]修车的加强版 因为数据较大,一次性把所有边都加完会T 于是我们每次只连需要的边跑费用流 就是开始先连所有厨师做倒数第1道菜 跑费用 ...