float 和 clear
float
特性1：可以为行内浮动元素设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
background-color: #e3a345;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span>123</span>
</body>
</html>
运行发现，宽高设置没有生效。加上float：left后，宽高设置生效了。前后结果变化：
2.两端自适应布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
background-color: #e3a345;
width: 50px;
height: 50px;
float: left;
}
div{
background-color: red;
width: 100%;
margin-left: 60px;
height: 80px;
}
</style>
</head>
<body>
<span>left</span>
<div>right</div>
</body>
</html>
运行结果：
clear
对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
Clear给元素约定一个规则，哪一边不允许出现浮动元素，如果出现了，则通过改变自身的位置【换下一行】来适应这个规则
三个元素都float left，中间元素clear right 无效，clear left，则后续两个都换到下一行去了
规律：clear的方向要对应floar 的方向，换行之后，原本跟在自己后面的元素依然跟在自己的后面
包裹浮动元素
<style>
.clearfix:after{
content:" ";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.container{
background-color: #0F9E5E;
}
</style> <div class="container clearfix">
<div style="float: left"> 123 </div>
</div>
另一种包裹浮动元素的方式是 使用BFC
float 和 clear的更多相关文章
- CSS中float和Clear的使用
CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...
- 89组合margin、padding、float、clear问题
有关css外边距margin和内边距padding样式,简而述之,顺时针方向旋转,按照上右下左读取,margin-top:/*距离上边距*/margin-right:/*距离右边距*/margin-b ...
- 转: CSS中float和clear的理解
float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢<div style="width:100px;">1111 ...
- CCS float vs clear
有人已经写过了.(*^__^*) 嘻嘻…… 为啥我不能写, ( ‵o′)凸 float 首先,HTML的布局是流布局.其元素是分为行内元素和块级元素的. 所谓行内元素就是接着写不会发生换行的元素如&l ...
- CSS的float与clear
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- float、clear、overflow
浮动: float: none|left|right 作用使得标签失去块级标签的独占一行效果,向某个方向靠拢 标签浮动了,也需要占地方,有时候出现未浮动的div覆盖部分浮动div是浏览器的bug情况 ...
- Css中position、float和clear整理
Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", ...
- CSS float与clear & 替换元素与非替换元素
css3盒模型(box)中的一个概念,在css这种,每个元素生成了包含内容的框,有内联元素和块级元素之分.也可以区分为替换元素与非替换元素. 替换元素:浏览器根据标签的元素与属性来判断显示具体的内容. ...
- float和clear
简介 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性. 浮动元素是float值不为none的元素. 可能 ...
随机推荐
- bzoj 3053: The Closest M Points【KD-tree】
多维KDtree板子 左右儿子的估价用mn~mx当区间,假设区间里的数都存在:k维轮着做割点 #include<iostream> #include<cstdio> #incl ...
- macOS 将【允许从以下位置下载的应用】设置为：任意来源
用管理员帐号进入Terminal: 1) 输入:sudo spctl --master-disable ,回车: 2) 重新进入该设置页面即可看到已生效:
- nginx缓存过期
1 原理 在默认下,请求过的内容会接受304,而从本地缓存调用.这是通过client向server发送请求,给出ETag,server确认ETag未变,则不返回内容,client调用本地缓存. 而ex ...
- April Fools Contest 2017 B
Description Programmers' kids solve this riddle in 5-10 minutes. How fast can you do it? Input The i ...
- 贪心 Codeforces Round #303 (Div. 2) B. Equidistant String
题目传送门 /* 题意:找到一个字符串p,使得它和s,t的不同的总个数相同 贪心:假设p与s相同,奇偶变换赋值,当是偶数,则有答案 */ #include <cstdio> #includ ...
- linux实现多台服务器文件同步
inotify-tools+rsync实时同步文件安装和配置 Linux+Nginx+PHP+MySQL+MemCached+eaccelerator安装优化记录(见 http://www.linux ...
- 创建表的规范 nvarchar2,varchar2
1,这个真没见过什么最佳实践,都是变长的,这些都是研发根据业务需求自己设定啊. 如果需要多语种支持就用NVARCHAR2(或者汉语),如果只是单语种(英语)就varchar2 . 2. Oracle中 ...
- C语言精确微秒级的延时
//----------------------------------------------------------------------------- // Delay_us //------ ...
- Linux下用matplotlib画决策树
1.trees = {'no surfacing': { 0: 'no', 1: {'flippers': {0: 'no', 1: 'yes'}}}} 2.从我的文件trees.txt里读的决策树, ...
- AJPFX浅谈关于Java程序员缺乏面向对象的基本功的问题
为什么很多 Java 程序员会缺乏面向对象基本功?这得怪那些 Java 框架.现在 Java 的各种框架太发达.太傻瓜化了,导致很多程序员只需要按部就班.照着框架进行代码填空,基本已经丧失了 OOA ...