min,茱萸,乳头疼-第十届ICC备案报名处，备案新闻早知道

admin 6个月前 ( 05-27 04:02 ) 0条评论
摘要： 清除浮动盒子高度问题在标准流中内容的高度可以撑起盒子的高度在浮...

铲除起浮

盒子高度问题

  • 在规范流中内容的高度能够撑起盒子的高度


 div{
 background-color: red;
 }
 p{
 width: 200px;
 heigh白娅倩t: 100px;
 background-color: blue;
 }


  • 在起浮流中起浮元素内容的高不能够撑起盒子的高


 div{
 background-color: red;
 }
 p{
 float: left;
 width: 200px;
 heigmin,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道ht: 100px;
 background-color: blue;
 }


铲除起浮方法一

  • 给前面的父盒子增加高度
  • 示例代码:

 *{
 margin: 0;
 padding: 0;
 }家必洁拖把
 .box1{
 background-color: red;
 /*这儿*/
 height: 50px;
 }
 .box2{
 b欲医ackground-color: purple;
 }
 ul{
 list-style: none;
 }
 .ul01 li{
 background-color: blue;
 }
 .ul02 li{
 background-color: green;
 }
 ul li{
 float: left;
 }


 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  



 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加高度前:


  • 增加高度后


  • 留意点:
  • 在企业开发中能不写高度就不写高度, 所以这种方法不常用

铲除起浮方法二

  • 运用clear:both;特点铲除前面起浮元素对我的影响
  • 示例代码蓝多多来了:

 *{
 margin: 0;
 padding: 0;
 }
 .box1{
 background-color: red;
 }
 .box2{
 background-color: purple;
 /*这儿*/
 clear: both;
 /*margin无效*/
 margin-top: 30px;
 }
 ul{
 list-style: none;
 }
 .ul01 li{
 background-color: blue;
 }
 .ul02 li{
 background-color: green;
 }
 ul li{
 float: leftmin,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道;
 }


 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  



 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加clear: bmin,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道oth;前:


  • 增加clear: both;后


  • 留意点:
  • 运用clear:both之后margin特点会失效, 所以不常用

铲除起浮方法三

  • 在两个有起浮子元素的盒子之间增加一个额定的块级元素
  • 示例代码:


 *{
 margin: 0;
 padding: 0;
 }
 .box1电牛金服{
 background-colormin,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道: red;
 }
 .box2{
 background-color: purple;
 }
 ul{
 list-style: none;
 }
 .ul01 li{
 backgromin,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道und-color: blue;
 }
 .ul02 li{
 background-color: green;
 }
 ul li{
 float: left;
 }
 /*这儿*/
 .wall{
 clear: both;
 }
 .h帮豆抽奖20{
 /*运用额定块级元特鲁姆普反常杆法素完成margin*/
 height: 20px;
 background-color: deepskyblue;
 }

 

 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  





 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加额定块级元素前


  • 增加额定块级元素后


  • 留意点
  • 在外墙法中能够经过设置额定标签的高度来完成margin顾天骏安染作用
  • 搜狐中许多运用了这个技能, 可是因为需求增加许多无意义的标签, 所以不常用

铲除起浮方法四

  • 在前面一个盒子的最终增加一个额定的块级元素
  • 示例代码

 *{
 margin: 0;
 padding: 0;
 }
 .box1{
 background-color: red;
 }
 .box2{
 background-color: purple;
 /*margin有用*/
 margin-top: 20px;
 }
 ul{
 list-style: none;
 }
 .ul01 li{
 background-color: blue;
 }
 .ul02 li{
 background-color: green;
 }
 ul li{
 float: left;
 }
 /*这儿*/
 .wall{
 clear: both;
 }

 

 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  

 
 



 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加额定块级元素前


  • 增加额定块级元素后


  • 留意点:
  • 内墙法会主动撑起盒子的高度, 所以能够直接设置margin特点
  • 和内墙法一韩国黄智仁样需求增加许多无意义的空标签，有违结构与体现的别离，在后期保护中将是噩梦

铲除起浮方法五

  • 什么是overflow:hidden?
  • overflow:hidden的作用是铲除溢出盒子边框外的内容
  • 示例代码
.test{
 width: 100px;
 height: 100px;
 border: 1px solid #000;
 background-color: red;
 overflow: hidden;
}
 
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

  • 增加overflow:hidden前


  • 增加overflow:hidden后


  • 怎么运用overflow:hidden;铲除起浮
  • 给前面一个盒子增加overflow:hidden特点
  • 示例代码

 *{
 margin: 0;
 padding: 0;
 }
 .box1{
 background-color: red;
 /*这儿*/
 overflow: hidden;
 *zoom:1;
 }
 .box2{
 background-colmin,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道or: purple;
 /*margin有用*/
 margin超级种马-top: 20px;
 }
 ul{
 list-style: none;
 }
 .ul01 li{
 background-color: blue;
 }
 .ul02 li{
 background-color: green;
 }
 ul li{
 float: left;
 }

 

 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  



 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加overflow:hidden;前


  • 增加overflow:hidden;后


  • 留意点:
  • 因为overflow:hidden能够撑起盒子的高度, 所以能够直接设置margin特点
  • IE8曾经不支撑运用overflow:h短柄滤头idden来铲除起浮, 所以需求加上一个*zoom:1;
  • 实际上*zoom:1能够触发IE8之前IE浏览器的hasLayout机制
  • 长处能够不必增加额定的标签又能够撑起父元素的高度, 缺陷和定位结合在一起运用时会有抵触min,茱萸,乳头疼-第十届ICC存案报名处，存案新闻早知道
  • *zoom:1;和_zoom:1的差异
  • 这个是hac月河湾马术沙龙k写法，用来辨认不同版别的IE浏览器
  • _后边的特点只要IE6能辨认
  • *后边的特点 IE6 IE7能辨认

铲除起浮方法六

  • 给前面的盒子增加伪元从来铲除起浮
  • 示例代码

 *{
 margin: 0;
 padding: 0;
 }
 .box1{
 background-color: red;
 }
 .box2{
 background-color: purple;
 /*margin有用*/
 margin-top: 20px;
 }
 ul{
 list-style: none;
 }
 .ul01 li{
 background-color: blue;
 }
 .ul02 li{
 background-color: gree吴怅然最新博客n;
 }
 li{
 float: left;
 }
 
 /*这儿*/
 .clearfix:after {
 /*生成内容作为最终一个元素*/
 content: "";
 /*使生成的元素以块级元素显现,占满剩下空间*/
 display: block;
 /*防止生成内容损坏原有布局的高度*/
 heigh高堰雪梅t: 0;
 /*使生成的内容不行见，并答应或许被生成内容盖住的内容能够进行点击和交互*/
 visibility: hidden;
 /*重点是这一句*/
 clear: bo东方蜜1号th;
 }
 .clearfix {
 /*用于兼容IE, 触发IE hasLayout*/
 *zoom:1;
 }


 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  



 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加伪元素前


  • 增加伪元素后


  • 留意点:
  • 本质上和内墙法相同, 都是在前面一个盒子的最终增加一个额定的块级元素
  • 增加伪元素后能够撑容佩穿耳起盒子的高度, 所以能够直接设置margin特点
  • CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

铲除起浮方法七

  • 给前面的盒子增加双伪元从来铲除起浮
  • 示例代码

 *{
 margin: 0;
 padding: 0;
 }潘湘湘
 .box1{
 background-color: red;
 }
 .box2{
 background-color: purple;
 /*margin有用*/
 margin-top: 20px;
 }
 ul{
 list-style: non锡兰叶下珠e;
 }
 .ul01 li{
 background-color: blue;
 }
 .ul02 li{
 background-color: green;
 }
 li{
 float: left;
 }
 
 /*这儿*/
 .cf:before,.cf:after {
 content:"";
 display:table;
 /*重点是这一句*/
 clear:both;
 }
 .cf {
 zoom:1;
 }


 

     
  • 大娃

    •  
  • 二娃

    •  
  • 三娃

    •  



 

     
  • 李南江

    •  
  • 极客江南

    •  
  • 江哥

    •


  • 增加双伪元素前


  • 增加双伪元素后


  • 留意点:
  • 增加伪元素后能够撑起盒子的高度, 所以能够直接设置margin特点
  • 先知道有这些方法, 原理需求学习到BFC和hasLayou口爆店t才干理解
  • 支撑BFC的浏览器（IE8+，firefox，chrome，safari）经过创立新的BFC闭合起浮；
  • 不支撑 BFC的浏览器 （IE5-7），经过触发 hasLayout 闭合起浮。
文章版权及转载声明：

作者:admin本文地址：http://www.icc10th2009.com/articles/1369.html发布于 6个月前 ( 05-27 04:02 )
文章转载或复制请以超链接形式并注明出处第十届ICC备案报名处，备案新闻早知道

标签：博主很懒，并没有设置标签