CSS基础(三)--清除浮动的影响
2017-09-29 07:11
495 查看
浮动带来的影响
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li{ float: left; } </style> </head> <body> <div> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> </div> <div> <ul> <li>生物</li> <li>化学</li> <li>物理</li> </ul> </div> </body> </html>
效果如图
原以为
li会分开两行,结果是第二个
li贴靠了一个
li,这是浮动带来的影响。
清楚浮动的影响
方法一:给浮动元素的祖先增加高度
如果一个元素要浮动,那么它的祖先要有高度才能关注浮动。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li{ float: left; } .first{ height: 60px; } </style> </head> <body> <div class="first"> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> </div> <div class="second"> <ul> <li>生物</li> <li>化学</li> <li>物理</li> </ul> </div> </body> </html>
只要浮动在一个有高度的盒子,那么这个浮动就不会影响后面的浮动。
方法二:Clear Both
方法一中,实际工作中很少使用到,因为一般容器的高度被内容撑高(类似android中
wrap_content)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li { float: left; } .second { clear: both; } </style> </head> <body> <div class="first"> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> </div> <div class="second"> <ul> <li>生物</li> <li>化学</li> <li>物理</li> </ul> </div> </body> </html>
给第二
div设置
clear both属性,
clear就是清除,
both指的是左浮动、右浮动都要清除。意思就是:清除别人对我的影响。
这种方法有一个非常大的、致命的问题,
margin失效了
方法三:隔墙法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li { float: left; } .cl{ clear: both; } .h16{ height: 10px; } </style> </head> <body> <div class="first"> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> </div> <div class="cl h16"> </div> <div class="second"> <ul> <li>生物</li> <li>化学</li> <li>物理</li> </ul> </div> </body> </html>
两个浮动的
div中添加多一个
div隔住。
方法三扩展:内墙法
隔墙法好用,但是第一个div,还是没有高度。如果我们现在想让第一个div,自动的根据自己的儿子,撑出高度,我们就要想一些“小伎俩”,“奇淫技巧”<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li { float: left; } * { margin: 0; padding: 0; } .c1{ clear: both; } .h10{ height: 10px; } </style> </head> <body> <div class="first"> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> <div class="c1 h10"></div> </div> <div class="second"> <ul> <li>物理</li> <li>化学</li> <li>生物</li> </ul> </div> </body> </html>
内墙法的优点就是,不仅仅能够让后部分的
ul不去追前部分的
ul了,并且能把第一个
div撑出高度。这样,这个
div的背景、边框就能够根据
ul的高度来撑开了。
方法四:overflow:hidden
overflow就是“溢出”的意思,
hidden就是“隐藏”的意思。
overflow:hidden表示溢出隐藏,所有溢出边框的内容都要隐藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div> <p> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </p> </div> </body> </html>
给
div添加
overflow:hidden
div { overflow: hidden; width: 200px; height: 200px; border: 1px solid red; }
overflow:hidden本意就是清除溢出到盒子外面的文字。
我们知道一个父亲不能被自己浮动的儿子,撑出高度。但是,只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> li { float: left; } .first { border: 1px solid red; } * { margin: 0; padding: 0; } </style> </head> <body> <div class="first"> <ul> <li>语文</li> <li>数学</li> <li>英语</li> </ul> </div> </body> </html>
可以看到浮动的子元素无法撑起父亲的高度。
给父节点添加
overflow:hidden
.first { overflow: hidden; border: 1px solid red; }
只要给父亲加上overflow:hidden; 那么,父亲就能被儿子撑出高了
清除浮动的影响总结
加高法:浮动的元素,只能被有高度的盒子关住。 也就是说,如果盒子内部有浮动,这个盒子有高,那么妥妥的,浮动不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。clear:both法:最简单的清除浮动的方法,就是给盒子增加
clear:both表示自己的内部元素,不受其他盒子的影响。浮动确实被清除了,不会互相影响了。但是有一个问题,就是
margin失效。两个
div之间,没有任何的间隙了。
隔墙法:在两部分浮动元素中间,建一个墙。隔开两部分浮动,让后面的浮动元素,不去追前面的浮动元素。墙用自己的身体当做了间隙。隔墙法好用,但是第一个div,还是没有高度。
overflow: hidden:这个属性的本意,就是将所有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。我们知道,一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了
overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。并且,
overflow:hidden能够让
margin生效。
相关文章推荐
- [js]02css基础-清除浮动
- DIV+CSS基础教程:清除浮动
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
- css基础学习之清除浮动
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')
- H5 CSS基础实战二:清除浮动的演练
- 浅谈css中浮动和清除浮动带来的影响
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
- css基础学习之清除浮动
- css之清除浮动影响
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有哪些影响?
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- CSS基础-5 浮动,margin的bug,清除浮动
- CSS 基础点集锦一:盒子模型、浮动、清除浮动
- css基础 clear属性:both 使用div块清除左右浮动的简单示例
- CSS基础之清除浮动
- 清除浮动的几种方式--css基础
- css清除浮动float的三种方法总结。为什么清浮动?浮动会有那些影响?
- css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')