CSS 的overflow:hidden; 、clear:both;属性详细解释
2016-12-07 17:42
501 查看
overflow:hidden;clear:both;测试下面代码
给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出,给box加上这个属性后,我们的content 的宽高自动的被隐藏掉了。另外,我们再做一个试验,将box这个div的高度值删除后,我们发现,box的高度自动的被content 这个div的高度值给撑开了。说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当content 这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了box这个div,也就是说,此时的content 的宽高是多少,对于已经脱离了的box来说,都是不起作用的。当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给box这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个div设置高度的时候,content 这个div的高度,就会撑开box这个div,而在另一个方面,我们要注意到的是,当我们给box这个div加上一个高度值,那么无论content 这个div的高度是多少,box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义。
clear:both;在css中,首先我们理解一下clear,顾名思义就是清除的意思,both的意思是全部,那连起来就是清除全部样式,不过这个样式主要是用于对多个div浮动的清除,如float:left,如果不清除,很容易对下面的div造成显示错位。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="description" content="全泰消化专家管理系统"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>系统</title> <style type="text/css"> * { margin: 0px; border: 0px; } .sss { width: expression(document.body.clientWidth); document .body.clientWidth > 900 ? "100%" : "1300px"; width: 100%; } </style> <style type="text/css"> html { height: 100%; margin: 0; } body { height: 100%; margin: 0; } </style> <style type="text/css"> #box { width: 500px; background: #000; height: 500px; } #content { float: left; width: 600px; height: 600px; background: red; } </style> <style> .keepbj { width: 600px; height: 50px; border: 1px solid #f00; } #div1 { float: left; width: 130px; height: 50px; } #div2 { float: left; width: 130px; height: 50px; } #div3 { clear:both; width: 130px; height: 30px; } </style> </head> <body> <!-- box的长宽都小于content的,这样:显示则被content撑开width:600px; height:600px; <div id="box"> <div id="content"> </div> </div> --> <!-- box的长宽都小于content的,加上overflow:hidden,溢出部分隐藏,这样:显示则为box的width:500px; height:500px; <div id="box" style="overflow:hidden;"> <div id="content"></div> </div> --> <div class='keepbj'> <div id='div1'>我会在左边</div> <div id='div2'>我会在右边</div> </div> <div id='div3'>我不会受flaot的影响。</div> </body> </html>
给box这个div加了一个overflow:hidden这个属性解决了这个问题。我们直到overflow:hidden这个属性的作用是隐藏溢出,给box加上这个属性后,我们的content 的宽高自动的被隐藏掉了。另外,我们再做一个试验,将box这个div的高度值删除后,我们发现,box的高度自动的被content 这个div的高度值给撑开了。说到这里,我们再来理解一下“浮动”这个词的含义。我们原先的理解是,在一个平面上的浮动,但是通过这个试验,我们发现,这不仅仅是一个平面上的浮动,而是一个立体的浮动!也就是说,当content 这个div加上浮动这个属性的时候,在显示器的侧面,它已经脱离了box这个div,也就是说,此时的content 的宽高是多少,对于已经脱离了的box来说,都是不起作用的。当我们全面的理解了浮动这个词的含义的时候,我们就理解overflow:hidden这个属性中的解释,清除浮动是什么意思了。也就是说,当我们给box这个div加上overflow:hidden这个属性的时候,其中的content 等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给box这个div设置高度的时候,content 这个div的高度,就会撑开box这个div,而在另一个方面,我们要注意到的是,当我们给box这个div加上一个高度值,那么无论content 这个div的高度是多少,box这个高度都是我们设定的值。而当content 的高度超过box的高度的时候,超出的部分就会被隐藏。这就是隐藏溢出的含义。
clear:both;在css中,首先我们理解一下clear,顾名思义就是清除的意思,both的意思是全部,那连起来就是清除全部样式,不过这个样式主要是用于对多个div浮动的清除,如float:left,如果不清除,很容易对下面的div造成显示错位。
相关文章推荐
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS float 属性 及CSS 的overflow:hidden 属性详细解释及css position
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- CSS 的overflow:hidden 属性详细解释
- 【html&css】overflow :hidden详细解释
- overflow :hidden 和 clear:both 与 clearfix撑起高度坍塌的父元素应用
- IE对于overflow:hidden;及其它CSS属性不兼容问题
- clear:both; overflow:hidden
- CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)
- clear both or overflow hidden , a clearfix solution
- 探究CSS属性overflow:hidden的作用:隐藏溢出和清除浮动
- css ! important 属性详细解释
- CSS清除浮动常用方法小结 CSS clear both {overflow:auto;zoom:1;}
- CSS中clear属性的both、left和right浅析