zoukankan      html  css  js  c++  java
  • 清浮动方法小结

          通常我们创建一全页面的布局时,浮动是一种常用的方法,也是页面元素定位的一种基本功能。浮动可以让元素一个挨着一个。浮动可以创建一个自然流布局,同时充许元素设置自身尺寸和其父元素容器的尺寸大小。

           虽然  浮动 很好用,但是使用上还是存在一定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度,子元素的浮动确定了他们的位置,但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷,从而使父元素的高度为“0”,以及忽略其他的属性。

        今天我们就来说说几种清浮动的方法:

    1、html的方法:

        在容器的结束标签前添加一个空标签,在空标签上直接设置样式“clear:both”。<div style="clear:both"></div>

    缺点:用这种方法来清除浮动,在大多数情况下是有效的,但这不太适合语义化。而且如果有很多浮动需要清除,这样就会造成页面上的空标签迅速堆积,而且在页面中没有上下文内容。

     

    2、css的方法:

      1、使用“overflow”属性,在具有浮动元素的父容器中设置“overflow”的属性值为“hidden”,这样父容器就会有一个高度存在。

    缺点:当你添加样式,或者将嵌套在里面的子元素移动到父容器的外面,或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中,你可以看到元素的盒子阴影被切断在父元素之内。

     

      2、给父元素添加上  clearfix ::before  或  clearfix ::after  两个伪类。使用这些伪类,我们可以在浮动元素的父容器前面和后面创建隐藏元素。(推荐使用)

    .clearfix::after {
    content: ".";           //引号中间的空格一定要有,是指定添加的隐藏元素的内容为空的。
    display: block;         // 指定隐藏元素的显示模式为块状

    height: 0;         //为了该元素不占用空间

    clear: both;            //清除左右浮动

    visibility: hidden;          //隐藏添加的当前元素

    *zoom:1;          //为了兼容ie6

    }

        目前解决浮动最推荐的方式

  • 相关阅读:
    整理一下反射
    数据查询--整理(更新中)
    【Django】Django model与数据库操作对应关系(转)
    给定 2 个正整数 a, b,a 和 b 最多可能有 40 位,求出 a + b 的和(C语言实现)
    c++和QT实现俄罗斯方块,使用GraphicsView。
    C语言的动态函数库和静态函数库的生成和使用(linux环境下)
    linux内核驱动的知识要点
    简单的linux内核移植知识
    快速排序c++/c实现
    c语言系统函数——进程的创建
  • 原文地址:https://www.cnblogs.com/qdxy/p/7457793.html
Copyright © 2011-2022 走看看