码迷,mamicode.com
首页 > 其他好文 > 详细

22-清除浮动

时间:2020-03-22 14:00:18      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:after   orm   清除浮动   并且   ble   简单   isp   左右   最简   

清除浮动
  当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱现象,可以通过清除浮动的方法来解决,浮动元素的影响
浮动的清理(clear)
  值:
    none:默认值。允许两边都可以有浮动对象
    left:不允许左边有浮动对象
    right:不允许右边有浮动对象
    both:左右两侧都不允许有浮动对象

*******浮动浮动,先浮后动,浮动的对象,会先漂浮起,离开原来的位置。后动,就是它后面的对象,会向它原来的位置上,动起来。

  清除浮动,就是可以去掉前面对象浮动,对后面对象的影响。
  为什么,原来在一行中的两个块,会因为,浏览器窗口的大小,改变,而改变其原来的位置
*****设置一个块水平居中时,都会给这个块设置一个宽度值。
  当父元素,没有指定,高度时,并且,它的子元素有浮动,这时,这个父元素的高度不会自动增加。
清除浮动的方法
  1、额外标签法(增加一个空标签,就是没有内容的标签)
  这种方法应该说是最简单的一种了,W3C建议在容器的末尾增加一个“clear:both”的元素,强迫容器适应它的高度以便装下所有的float元素
  
  <div id="main">
    <div id="left">左盒子</div>
    <div id="right">右盒子</div>
    <div class="clear"></div>增加一个空的div

  </div>
  <div id="footer">底部</div>
2、父元素使用overflow的方法
  通过设置父元素overflow值设置为hidden,是最简单的清除浮动方法,但是如果子元素使用了定位布局,就会很难实现

  *{margin:0; padding:0;}
  #main,#footer{margin:0 auto;}
  #main{width:800px; background:#ccc; overflow:hidden; zoom:1; position:relative;}
  #left{width:200px; height:200px;}
  #right{width:300px; height:300px; background:green; float:right}
  #footer{width:800px; height:50px; background:red;}

多学一点zoom
  zoom只有IE内核的浏览器支持,缩放比例。
  
  normal:默认值。使用对象的实际尺寸
  number:百分数 | 无符号浮动实数。浮点实属
  设置或检索对象的缩放比例 数值为1.0或百分数为100%时相当于此属性的normal值

  zoom:1解决IE6高度适应问题
    深入布局技巧
  css中溢出的使用
    overflow:visible[ 默认值。不剪切内容也不设置当对象的内容超过其 加滚动条],auto[ 在必需时 对象内容才会被裁指定高度及宽度时如何管 切或显示滚动条],hidden[ 不现实超出对象尺寸李内容 的内容 ],scroll [ 总是显示滚动条 ]
    
3、利用伪对象after方法:
  定义一个类,使用伪对象after,控制浮动元素的影响。
  网上最流行的清除浮动代码:
  .clearFix:after{
    clear:both;
    display:block;
    visbility:hidden;
    height:0;
    line-height:0;
    content:"";
  }
  .clearFix{zoom:1;} /* 解决IE6/7兼容性问题 */

 

22-清除浮动

标签:after   orm   清除浮动   并且   ble   简单   isp   左右   最简   

原文地址:https://www.cnblogs.com/xiang-liang/p/12545563.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!