• 清楚浮动的那些事


    我们经常碰到的一种布局问题,就是两个容器并排分布。

    这时候我们考虑的就是如何实现,如果是小容器我们考虑的可能是display:inblock来实现

    但是如果是两个大容器,更多的时候我考虑的都是浮动来完成布局。

    但是很多时候我们对去清除浮动都是一种似懂非懂的方法,关于清除浮动有以下几个常见的方法:

    一、父级容器给死高度

    这样的话就能很好的解决浮动的问题,但是也有一定的局限性。很多时候我们的父容器的的高度都是自动的,根本不能定死。

    所以这时候就需要用到其他的方法。

    二、浮动容器后面加一个空div标签 clear:both

    这个方法现在应该也有蛮多的人在使用,就是在浮动元素的后面添加一个空的div标签。然后给这个div添加style样式clear:both

    也能很有效的解决浮动问题但是这样的话如果一个页面有很多要用到浮动的地方,那你就要添加很多个空的div这样的话就会很麻烦,

    而且这样也很难理解。所以现在还是用的蛮少。

    三、父级div定义 伪类:after 和 zoom

    这个方法是我本人目前喜欢用的一个方法

    通过定义一个类

    /*清除浮动样式*/
    .clear:after{
    content:"020";display:block;height:0;clear:both;
    }
    .clear{
    zoom:1;
    }

    在需要用的时候就给有浮动的容器的父容器添加这个类 就能很好的解决浮动问题,个人感觉很方便,比较推荐这个方法

    四、父级div定义 overflow:hidden或者overflow:auto

    这个方法有一定的局限性,必须要定义width或者zoom:1,同时不能定义height,因为使用hidden或者auto的时候,浏览器会自动检查浮动区域的高度。

    另外使用hidden的时候不能和position一起使用 那样的话超出的部分就会被隐藏,而当用auto的时候如果子元素超出父元素的宽度就会出现滚动条。

      其他的一些方法就不一一介绍了,都是些仅限了解就可以了。没有太多的使用价值。如果真感兴趣的可以去网上查查,网上还是有很多的资料的。

    来源:http://www.cnblogs.com/hx1992/p/3791587.html

    参考:解读浮动闭合最佳方案:clearfix

  • 相关阅读:
    从上往下,从左往右
    idea jar包破解
    StarUML 2下载、安装、破解全过程
    windows10 找回windows照片查看器的方法
    Tomcat报错Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
    Java基于SSM在线学习系统设计与实现
    多个iframe,删除详情页时刷新同级iframe的table list
    Eclipse项目工程导入到IDEA继续开发-超详细
    MySQL用B+树做索引
    彻底禁用Chrome插件停用开发者模式提示插件version.dll
  • 原文地址:https://www.cnblogs.com/linsanshu/p/5744568.html
Copyright © 2020-2023  润新知