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

    }

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

  • 相关阅读:
    毕业一年的广州之行
    js一个抽奖的例子
    关于position:absolute的困惑
    px,pt,em,rem
    HTML4.01和XHTML1.0和XHTML1.1的一些区别
    通过微信分享链接,后面会被加上from=singlemessage&isappinstalled=1可能导致网页打不开
    windows无提示关闭页面
    canvas画随机闪烁的星星
    angular背景图片问题
    Python爬虫(二)— Python3内置模块 Urllib
  • 原文地址:https://www.cnblogs.com/qdxy/p/7457793.html
Copyright © 2011-2022 走看看