清除浮动clear-left-right-both-none效果
<!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效果的更多相关文章
- CSS 清除浮动 clear 属性
CSS 清除浮动 clear 属性用于设定元素哪一侧不允许有其他浮动元素(而并非取消元素的浮动). 可能的取值如下: 取值 说明 none 默认值,允许两侧都有浮动元素 left 左侧不允许有其他浮动 ...
- 清除浮动clear/BFC
浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level ...
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利 ...
- css 清除浮动 clear
.clearfix{ zoom:1;/*对于老版本的IE进行兼容的设置*/ } .clearfix:after{ content:""; display:block; visibi ...
- CSS学习摘要-浮动与清除浮动
以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
- css 盒模型 文档流 几种清除浮动的方法
盒模型 1.box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border content-box:此值为其默认值,其 ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- CSS浮动和清除浮动
1.浮动float div配合float浮动来做页面的布局,浮动最常用的地方就是用来做布局.只有一个标签设置了浮动float属性,就会变成块级标签. <!DOCTYPE html> < ...
- BFC之清除浮动篇&clear
我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...
随机推荐
- C#ThreadPool学习
一.简介 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 I/O.代表其他线程等待以及处理计时器 注意:线程池中启动的线程都是后台线程 二.主要方法 GetAvailableThread ...
- 用C语言构建一个可执行程序的流程
1.流程图 从用C语言写源代码,然后经过编译器.连接器到最终可执行程序的流程图大致如下图所示. 2.编译流程 首先,我们先用C语言把源代码写好,然后交给C语言编译器.C语言编译器内部分为前端和后端. ...
- ORA-14402:更新分区关键字列将导致分区更改
开启行迁移就好了:alter table TABLE_NAME enable row movement; 注意:表分区的时候要确定分区字段是否会UPDATE,如果会的话一定要开启行迁移,否则就会报这个 ...
- 【转】C#使用Oracle.ManagedDataAccess.dll
源地址:https://www.cnblogs.com/goldenbridge/p/7812081.html
- 在libuv中使用openssl建立ssl连接
在libuv中使用openssl建立ssl连接 @(blogs) 使用openssl进行加密通信时,通常是先建立socket连接,然后使用SSL_XXX系列函数在普通socket之上建立安全连接,然后 ...
- 关于pip无法安装scrapy的问题
安装scrapy时如果出现下列问题: building ' twisted. test. raiser' extension error: Microsoft Visual C++ 14.0 is r ...
- Flink学习笔记：Connectors之kafka
本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...
- eclipse中查看java源码时，出现source not found问题
- windows下Idea结合maven开发spark和本地调试
本人的开发环境: 1.虚拟机centos 6.5 2.jdk 1.8 3.spark2.2.0 4.scala 2.11.8 5.maven 3.5.2 在开发和搭环境时必须注意版本兼容的问题 ...
- 关于hive Metadata 使用 MsSQL
下面的页面里说明, http://docs.hortonworks.com/HDPDocuments/HDP2/HDP-2.0.6.0-Win/bk_installing_hdp_for_window ...