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

清除浮动的几种常用方法

时间:2017-11-26 11:02:38      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:添加   内联   代码   image   height   属性   one   http   过多   

首先,浮动这个样式的出现,仅仅只是为了实现图文环绕的效果,现在大多时利用浮动来布局;

浮动:

  使元素推理文档流,按照指定方向发生移动;

  遇到父级边界或者相邻的浮动元素会停下来;

浮动的特性:

  1,块元素一行显示多个;

  2,内联元素支持宽高;

  3,没有设置宽度时由内容撑开宽度;

  4,脱离文档流;

浮动的破坏性:

  浮动元素脱离文档流后,导致父级元素高度塌陷。父级元素无法包裹住子级浮动元素;

技术分享图片

 技术分享图片

为什么要清除浮动:

  解决父级高度塌陷;

清除浮动的方法:

  1,clear清除浮动

    clear:left || right || both || none

      clear:left  清除左侧浮动元素;

      clear:right  清除右侧浮动元素

      clear:both  清除左右两边

      clear:none  不清除  

      代码:

    技术分享图片

 

    效果图:

      技术分享图片

    缺点:如果浮动元素过多浪费标签;不优雅;

  2.inline-block请浮动

    技术分享图片

    效果图:

     技术分享图片

    缺点:margin:auto;失效;

  3.<br />的clear属性请浮动

    代码:

    技术分享图片

    效果图:

     技术分享图片

    缺点: 当前页面有很多模块用到浮动时,每个用到的模块都要加<br clear="all" />;

       不符合w3c标准;

  4.以浮制浮

    给父级添加浮动

    代码:

      技术分享图片

     效果图:

     技术分享图片

      缺点:不理智的行为,总会有个父级节点会塌陷;

  5.:afte伪类请浮动

     代码:

      技术分享图片

    效果图:

    技术分享图片

    缺点:无;目前最优雅的清除浮动的方式;

 

 

 

 

    

     

 

清除浮动的几种常用方法

标签:添加   内联   代码   image   height   属性   one   http   过多   

原文地址:http://www.cnblogs.com/LNning/p/7897331.html

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