<!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. Visual Studio 2013 新增功能：“Browser Link”

    今天新装了 Visual Studio 2013, 使用 VS2013 打开一个现有的 WEB 网站, 在调试网站的时候出现在了脚本错误,一个文件名叫 "browserLink", ...

  2. LOJ#10106. 「一本通 3.7 例 2」单词游戏

    题目链接:https://loj.ac/problem/10106 题目描述 来自 ICPC CERC 1999/2000,有改动. 有 NNN 个盘子,每个盘子上写着一个仅由小写字母组成的英文单词. ...

  3. Redis在window下安装以及配置

    一.安装Redis 1.Redis官网下载地址:http://redis.io/download,下载相应版本的Redis,在运行中输入cmd,然后把目录指向解压的Redis目录. 2.启动服务命令 ...

  4. 在虚拟机中连接oracle数据库报错ORA-12154，其他服务器连接无问题

    在一台服务器上使用sqlplus登录oracle数据库,cmd->sqlplus->name/passwd@orcl2登录某个数据库用户,提示ORA-12154.使用当前服务器的PLSQL ...

  5. windows10 docker 使用以及虚拟机下fastDFS 的使用教程

    我们 先来了解下 什么是docker?   Docker的思想来自于集装箱,集装箱解决了什么问题?在一艘大船上,可以把货物规整的摆放起来.并且各种各样的货物被集装箱标准化了,集装箱和集装箱之间不会互相 ...

  6. Django 实现网站注册用户邮箱验证功能

    我们在很多网站上都可以看到用户注册使用电子邮件激活或启用的方式.也就是说,用户在注册后填写正确的电子邮件地址,接着网站会发送一封启用电子邮件到用户设置的电子邮件的邮箱中,并在邮件中提供一个激活或启用的 ...

  7. Java面向对象之关键字super 入门实例

    一.基础概念 (一)super关键字 super关键字的用法和this相似.this代表的是当前对象.super代表的是父类中内存空间. 子父类中是不会出现同名属性的情况. (二)继承中.成员变量问题 ...

  8. 八大排序算法的python实现（三）冒泡排序

    代码: #coding:utf-8 #author:徐卜灵 #交换排序.冒泡排序 L = [1, 3, 2, 32, 5, 4] def Bubble_sort(L): for i in range( ...

  9. 搭建svn管理平台

    安装svn服务器:yum -y install subversion 创建svn的目录:mkdir -p /data/svn 初始化svn目录:svnadmin create /data/svn co ...

  10. Docker镜像的导出和载入

    https://www.cnblogs.com/lishidefengchen/p/10564765.html