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>
