码迷,mamicode.com
首页 > Web开发 > 详细

css浮动

时间:2017-09-25 15:18:35      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:结构   其他   浮动   hid   play   现象   隐藏   display   isp   

方式一:使用overflow属性来清除浮动

    .ovh{

      overflow:hidden;

     }

    先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

    注意:一般情况下也不会使用这种方式,因为overflow:hidden有一个特点,离开了这个元素所在的区域以后会被隐藏(overflow:hidden会将超出的部分隐藏起来).

 

方式二:使用额外标签法

    .clear{

      clear:both;

     }

    在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.

      a.内部标签:会将这个浮动盒子的父盒子高度重新撑开.(内墙法)

      b.外部标签:会将这个浮动盒子的影响清除,但是不会撑开父盒子(外墙法)

    注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.

 

方法三:使用伪元素来清除浮动

    .clearfix:after{

      centent:"";//设置内容为空

      height:0;//高度为0

      line-height:0;//行高为0

      display:block;//将文本转为块级元素

      visibility:hidden;//将元素隐藏

      clear:both//清除浮动

     }

    .clearfix{

      zoom:1;为了兼容IE

    }

方法四:使用双伪元素清除浮动

    .clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .clearfix {

                  zoom: 1;

            }

方法五:给浮动元素的祖先元素加高度(一般为父元素)

      我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的,那么我们给它的设置适当的高度就可以解决这个问题了。

      缺点:在浮动元素高度不确定的时候不适用

方法六:父元素浮动

      当父元素浮动的时候,无需为子元素的浮动清除浮动,布局时经常用到

      缺点:消除了塌陷现象,但由于其父元素也发生了浮动故,其后元素若处于正常文档流,会被跌在底下,

         另外,需要给每个浮动元素父级添加浮动,浮动多了容易出现问题

方法七:父元素处于绝对定位

      缺点:与上一个方法同理,由于绝对定位已脱离正常文档流,故出现相同情况,解决办法可以使用以上办法结合,灵活多变

 

 

还有一些其他方法,在这就不多描述,以上差不多就是比较常用的清除浮动的方法。

css浮动

标签:结构   其他   浮动   hid   play   现象   隐藏   display   isp   

原文地址:http://www.cnblogs.com/love314159/p/7591879.html

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