<!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. duilib入门简明教程 -- 第一个程序 Hello World(3)

    小伙伴们有点迫不及待了么,来看一看Hello World吧: 新建一个空的win32项目,新建一个main.cpp文件,将以下代码复制进去: #include <windows.h> #i ...

  2. C#多线程编程实战1.4终止线程

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  3. 【连载】redis库存操作，分布式锁的四种实现方式[二]--基于Redisson实现分布式锁

    一.redisson介绍 redisson实现了分布式和可扩展的java数据结构,支持的数据结构有:List, Set, Map, Queue, SortedSet, ConcureentMap, L ...

  4. 十五、Node.js-fs模块（中）

    有了上一篇JS同步异步知识的铺垫,我们一起学习一下fs模块的同步和异步知识: Node.js内置的fs模块就是文件系统模块,负责读写文件. 和所有其它JavaScript模块不同的是,fs模块同时提供 ...

  5. MySQL参数log_bin_trust_function_creators

    问题:执行创建函数的sql文件报错如下: [Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA ...

  6. kali linux之edb--CrossFire缓冲区溢出

    漏洞的罪恶根源------变量,数据与代码边界不清,开发人员对用户输入没做过滤,或者过滤不严 如这个脚本,写什么,显示什么,但是加上:,|,&&,后面加上系统命令,就执行命令了 缓冲区 ...

  7. Django模板—-自定义过滤器和标签

    一.filter和simple_tag 1.在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.在app中创建template ...

  8. 【spring boot】FilterRegistrationBean介绍

    前言 以往的javaee配置过滤器是在web.xml中配置的,如下代码 <filter> <filter-name>TestFilter</filter-name> ...

  9. 八大排序算法的python实现（六）归并排序

    代码: #coding:utf-8 #author:徐卜灵 def merge(left,right): i,j = 0,0 result = [] while i < len(left) an ...

  10. Georgia and Bob POJ - 1704 阶梯Nim

    $ \color{#0066ff}{ 题目描述 }$ Georgia and Bob decide to play a self-invented game. They draw a row of g ...