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

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

清除浮动 : 实现父元素能被浮动元素撑开

(1)添加<div style="clear:both;"></div>
(2) css after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack(zoom:1) ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout
zoom:1兼容IE6、IE7、IE8浏览器,经常会遇到一些问题,可以使用zoom:1来解决,有如下作用:
  触发IE浏览器的haslayout
  解决ie下的浮动,margin重叠等一些问题。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;}
.test{zoom: 1;}/*ie兼容*/
.test:after{
content: "564654";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.before-test{zoom: 1;}
.before-test:before{
content: "564654";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div class="test" style="border:1px solid red;">
<p style="float: left;height: 100px;border: 1px solid blue;font-size: 14px;">黄金进口的水果科技的反馈结果合法</p>
<p style="float: left;height: 80px;border: 1px solid gray;">xdshgfhgh</p>
<!--<div style="clear: both;"></div>-->
<p class="before-test">sdgfdgfhg</p>
<p>sdgsfhghgfj</p>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/rionaBlog/p/5736429.html

你可能感兴趣的文章
架构图-模型
查看>>
黑马程序员_Java基础枚举类型
查看>>
UIImage 和 iOS 图片压缩UIImage / UIImageVIew
查看>>
ajax向后台传递数组
查看>>
疯狂JAVA16课之对象与内存控制
查看>>
[转载]树、森林和二叉树的转换
查看>>
软件测试-----Graph Coverage作业
查看>>
django ORM创建数据库方法
查看>>
创建Oracle synonym 详解
查看>>
php7 新特性整理
查看>>
RabbitMQ、Redis、Memcache、SQLAlchemy
查看>>
linux查看端口占用
查看>>
知识不是来炫耀的,而是来分享的-----现在的人们却…似乎开始变味了…
查看>>
CSS背景颜色、背景图片、平铺、定位、固定
查看>>
口胡:[HNOI2011]数学作业
查看>>
中国剩余定理
查看>>
uva 10137 The trip
查看>>
数据库锁机制及乐观锁,悲观锁的并发控制
查看>>
03 线程池
查看>>
201771010125王瑜《面向对象程序设计(Java)》第十三周学习总结
查看>>