css--float浮动
前戏
前面我们学习了CSS相关的知识，现在试想一下，如果我们想把两个div放在一行显示，该怎么处理？前面也说过，div是块级标签，默认占一行，这时候如果想要达成效果，那就要用到float了
float
float中的四个参数
float：left 左浮动 float：right 右浮动 float：none 不浮动 float：inherit 继承
先来看一下不加float的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{padding: 0;margin: 0}
div{height:100px;width:100px;background: red}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
left
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{padding: 0;margin: 0}
div{height:100px;width:100px;background: red;
text-align: center;
line-height: 100px;} div{float: left;
margin-right: 10px;
} </style>
</head>
<body>
<div class="c1">1</div>
<div class="c2">2</div>
</body>
</html>
right
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{padding: 0;margin: 0}
div{height:100px;width:100px;background: red;
text-align: center;
line-height: 100px;} div{float: right;
margin-right: 10px;
} </style>
</head>
<body>
<div class="c1">1</div>
<div class="c2">2</div>
</body>
</html>
注意：float：right时，两个div的顺序就反过来了，因为先把c1的浮动到最右边，然后浮动c2
none
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{padding: 0;margin: 0}
div{height:100px;width:100px;background: red;
text-align: center;
line-height: 100px;} div{float: none;
margin-right: 10px;
} </style>
</head>
<body>
<div class="c1">1</div>
<div class="c2">2</div>
</body>
</html>
none就是不浮动，就和默认的div一样的效果
inherit
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{padding: 0;margin: 0}
div{height:100px;width:100px;background: red;
text-align: center;
line-height: 100px;} .test{float: right;
height: 200px;width: 200px;background: green;
}
.c1,.c2{
float: inherit;
margin-top:10px; } </style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
</div>
</body>
</html>
代码解释：
我们给class为c1和c2的加上了float: inherit;给它的父元素加上了float: right，所以父元素会像右浮动，但是因为c1和c2继承了父元素的浮动，所以也会像右浮动，解释完毕。
float的副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.c1,.c2{background: red;float: left;height: 30px;width: 20px;margin-right: 10px}
.c3{background: green;height: 100px;width: 100px;}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3"></div> </div>
</body>
</html>
我们可以看到，上面绿色的框产生了易位，原本是要想绿色的框在红色的下面显示，这就是浮动的副作用之一
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
.c3{background: green;height: 100px;width: 100px;}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<!-- <div class="c3"></div>--> </div>
</body>
</html>
如果我们给上面的代码没有添加float，则子元素会把父元素的高度撑起来，加上float之后，父元素的高度就成了一条线。这也是float的副作用
清除浮动的副作用
清除浮动的副作用有四种方法
1. 手动给父元素设置高度
2.通过clear清除内部和外部浮动
3.给父元素添加overfloat属性并结合zoom：1使用
4.给父元素添加浮动
手动给父元素设置高度
我们先来看一下副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;width:100px;}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div> </div>
</body>
</html>
给父元素设置高度height：30px；
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
height:30px; }
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div> </div>
</body>
</html>
但是我们想一想，如果子标签有多个，是不是就超过了父元素的高度呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
height:30px; }
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div> </div>
</body>
</html>
经常测试，发现真是这样的，那我们使用添加overfloat属性并结合zoom来试一下，看能不能解决掉我们的问题
overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
overflow: hidden;
zoom: 1}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div> </div>
</body>
</html>
解释：overflow是将溢出的截取掉
经过测试发现，完美的解决了我们的问题
通过clear清除内部和外部浮动
clear有四个属性
clear：none
clear：left 左边不允许有浮动
clear：right 右边不允许有浮动
clear：both 左右都不允许有浮动
先来看一下副作用的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
height:100px; }
.c1{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
.c2{background: green;height:50px;width:30px;}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div> </div>
</body>
</html>
使用clear：left解决副作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
height:100px; }
.c1{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
.c2{background: green;height:50px;width:30px;
clear: left;
}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div> </div>
</body>
</html>
其余的三个也是同理，就不做具体的演示
给父元素添加浮动
还是先看一下副作用的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div> </div>
</body>
</html>
我们给父元素也加上浮动float：left
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
float: left;
}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div> </div>
</body>
</html>
刷新之后，也能解决我们的问题，那给父元素添加一个兄弟元素看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
float: left;
}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
.c3{height: 100px;width: 100px;background: #4d4d4d}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div> </div>
<div class="c3">啦啦</div>
</body>
</html>
刷新之后发现，虽然父元素的问题解决了，但是它的兄弟标签有嵌入到了里面，我们可以给兄弟标签加上clear：both解决
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
.test{border: 1px solid red;
width:100px;
float: left;
}
.c1,.c2{background: red;float: left;height: 30px;width: 20px;
margin-right: 10px}
.c3{height: 100px;width: 100px;background: #4d4d4d;
clear: both}
</style>
</head>
<body>
<div class="test">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div>
<div class="c2">2</div> </div>
<div class="c3">啦啦</div>
</body>
</html>
点我偷看
小练习
使用浮动完成以下效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
*{padding: 0;margin: 0;}
.test{background: #ccc;height: 32px;width: 700px;}
.c2{float: left;margin-right:30px;line-height: 32px;}
.icon{float: right}
.d1{float: inherit;margin-left: 30px;line-height: 32px;} </style>
</head>
<body>
<div class="test">
<div class="a1">
<div class="c2">测试</div>
<div class="c2">开发</div>
<div class="c2">产品</div>
<div class="c2">UI</div>
</div> <div class="icon">
<div class="d1">python</div>
<div class="d1">HTML</div>
<div class="d1">CSS</div>
<div class="d1">Js</div>
</div>
</div> </body>
</html>
点我偷看
css--float浮动的更多相关文章
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- [转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- css float 浮动
CSS Float(浮动) 什么是 CSS Float(浮动)?大理石平台价格 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像, ...
- CSS：CSS Float(浮动)
ylbtech-CSS:CSS Float(浮动) 1.返回顶部 1. CSS Float(浮动) 什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围 ...
- DIV CSS float浮动
一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...
- CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
随机推荐
- 清除display:inline-block元素换行符间隙font-size:0;
font-size:0; 清除display:inline-block元素换行符间隙 看例子: css: .dd {background-color: #ddd;} .dd2 {background- ...
- 3D max模型导入unity 3D中注意事项
一.单位,比例统一 在建模型前先设置好单位,在同一场景中会用到的模型的单位设置必须一样,模型与模型之间的比例要正确,和程序的导入单位一致,即便到程序需要缩放也可以统一调整缩放比例.统一单位为米. ...
- 3DMAX 4角色蒙皮
1 角色建模 略,以后补充 2 骨骼绑定 一般不用骨骼直接拉,Biped足够,以后适当补充骨骼直接拉的操作 1 将Biped骨骼和模型对齐 1 创建biped之后,第一步一要先选择,然后再对位骨骼到模 ...
- Codevs 1570 去看电影
1570 去看电影 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 农夫约翰带着他的一些奶牛去看 ...
- 慕课笔记-Java入门第三季
1.自定义异常 自定义异常必须继承Exception类或者其子类. 2.字符串 String对象创建后则不能被修改,是不可变的,所谓的修改其实是创建了新的对象. 多次创建的字符常量,Java编译程序只 ...
- 自然语言处理（二）——PTB数据集的预处理
参考书 <TensorFlow:实战Google深度学习框架>(第2版) 首先按照词频顺序为每个词汇分配一个编号,然后将词汇表保存到一个独立的vocab文件中. #!/usr/bin/en ...
- ZooKeeper-3.3.4集群安装配置（转载）
ZooKeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向外部应用暴露一组通用服务——分布式同步(Distributed Synchronization).命名服务(Naming S ...
- hibernate下载
- python 函数求两个数的最大公约数和最小公倍数
1. 求最小公倍数的算法: 最小公倍数 = 两个整数的乘积 / 最大公约数 所以我们首先要求出两个整数的最大公约数, 求两个数的最大公约数思路如下: 2. 求最大公约数算法: 1. 整数A对整数 ...
- LocalBroadcastManager
LocalBroadcastManager mLocalBroadcastManager; BroadcastReceiver mReceiver; //注册通知 mLocalBroadcastMan ...