博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
清除浮动float的方法
阅读量:6274 次
发布时间:2019-06-22

本文共 798 字,大约阅读时间需要 2 分钟。

  浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置以及width height属性。而且,同样的代码,在各种浏览器中,显示效果也有可能不相同,这样让  清楚浮动更难了。

  1.父级div定义  伪类:after和zoom;

    <style type="text/css">

      .div1{background-color:#000;border:1px soild red;}

      .div2{background-color:#800080;border:1px soild red;height:100px;margin-top:10px}

      .left{float:left;background-color:#ddd;width:20%;height:200px}

      .right{float:right;background-color:#ddd;width:30%;height:80px}

    </style>

      /*清除float代码*/

      .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

      .clearfloat{zoom:1}

    <div class="div1 clearfloat">

      <div class="left">left</div>

      <div class="right">right</div>

    </div>

    <div class="div2">

      div2

    </div>

 

转载于:https://www.cnblogs.com/xingxing88/p/5967804.html

你可能感兴趣的文章
嵌入式根文件系统的移植和制作详解
查看>>
MEF部件的生命周期(PartCreationPolicy)
查看>>
LCD的接口类型详解
查看>>
nginx 基础文档
查看>>
LintCode: Unique Characters
查看>>
Jackson序列化和反序列化Json数据完整示例
查看>>
.net 中的DllImport
查看>>
nyoj 517 最小公倍数 【java睑板】
查看>>
include与jsp:include区别
查看>>
ftp的20 21端口和主动被动模式
查看>>
MySQL存储引擎选型
查看>>
Java中的statickeyword具体解释
查看>>
Linux车载系统的开发方向
查看>>
并发编程之五--ThreadLocal
查看>>
摄像头驱动OV7725学习笔记连载(二):0V7725 SCCB时序的实现之寄存器配置
查看>>
iOS播放短的音效
查看>>
[java] java 线程join方法详解
查看>>
JQuery datepicker 用法
查看>>
golang(2):beego 环境搭建
查看>>
天津政府应急系统之GIS一张图(arcgis api for flex)讲解(十)态势标绘模块
查看>>