zoukankan      html  css  js  c++  java
  • 深入剖析——float之个人见解

    浮动的原本作用仅仅是为了实现文字的环绕效果。

    以下分别是html与css代码,显示效果如下图。因为两个div使用了float浮动属性,所以脱离了标准文档流。让父元素撑开高度,我们需要清除浮动。

    <div class="box">
            <div class="box-left">我是left-box</div>
            <div class="box-right">我是right-box</div>
        </div>
    .box{
                 600px;
                margin:50px auto;
                border:1px solid #f00;
                padding:10px;  
                background: #000;
            }
            .box-left,.box-right{
                 200px;
                height: 150px;
                border:2px solid #fff;
                background: #999;
            }
            .box-left{
                float: left; 
            }
            .box-right{
                float: right;
            }

    一共有两种方法——

    1.在类为"box"的结束标签中加一个空div,并设置样式——<div style="clear:both"></div>

    2.使用css伪类after——

    after顾名思义是在元素后面的意思,实质是在元素之后添加内容。

    这个伪元素允许制作人员在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。默认地,这个伪元素是inline行内元素,这里我们使用属性 display 改变这一点。  

    PS:所有主流浏览器都支持 :after 伪元素,但对于IE来说,只有IE8以上版本支持。

    {*zoom:1}属于IE浏览器的专有属性。(支持IE6和IE7)

    .clearfix必须定义在包含浮动子元素的父级元素上!!!!

    
    

  • 相关阅读:
    面试题:链表倒数第k个节点
    面试题:重建二叉树
    面试题:从尾到头打印链表
    面试题:第一个出现的字符位置
    面试题:调整数组顺序
    面试题:有限制条件的求和
    面试题:Fibonacci数列
    面试题:旋转数组的最小数字
    面试题:替换空格
    EndNote8破解版下载安装
  • 原文地址:https://www.cnblogs.com/ssh-007/p/4349122.html
Copyright © 2011-2022 走看看