几种常用的清除浮动方法(一)

From: https://www.cnblogs.com/nxl0908/p/7245460.html

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

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}.clearfloat{zoom:1}</style> 
<div class="div1 clearfloat"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">div2</div>

复制代码

  • 原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
  • 优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
  • 缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
  • 建议:推荐使用,建议定义公共类,以减少CSS代码
  • 评分:★★★★☆

2.在结尾处添加空div标签clear:both

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}/*清除浮动代码*/.clearfloat{clear:both}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">div2</div>

复制代码

  • 原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
  • 优点:简单,代码少,浏览器支持好,不容易出现怪问题
  • 缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽
  • 建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
  • 评分:★★★☆☆

3.父级div定义height

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">div2</div>

复制代码

  • 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题
  • 优点:简单,代码少,容易掌握
  • 缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
  • 建议:不推荐使用,只建议高度固定的布局时使用
  • 评分:★★☆☆☆

4.父级div定义overflow:hidden

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">div2</div>

复制代码

  • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
  • 优点:简单,代码少,浏览器支持好
  • 缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
  • 建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
  • 评分:★★★☆☆

5.父级div定义overflow:auto

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">div2</div>

复制代码

  • 原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
  • 优点:简单,代码少,浏览器支持好
  • 缺点:内部宽高超过父级div时,会出现滚动条。
  • 建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
  • 评分:★★☆☆☆

6.父级div也一起浮动

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">div2</div>

复制代码

  • 原理:所有代码一起浮动,就变成了一个整体
  • 优点:没有优点
  • 缺点:会产生新的浮动问题。
  • 建议:不推荐使用,只作了解。
  • 评分:★☆☆☆☆

7.父级div定义display:table

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}.div2{background:#800080;border:1px solid red;height:100px;width:98%;}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
</div>
<div class="div2">div2</div>

复制代码

  • 原理:将div属性变成表格
  • 优点:没有优点
  • 缺点:会产生新的未知问题
  • 建议:不推荐使用,只作了解
  • 评分:★☆☆☆☆

8、结尾处加br标签clear:both

复制代码

<style type="text/css"> .div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}.div2{background:#800080;border:1px solid red;height:100px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}.clearfloat{clear:both}</style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">div2</div>

复制代码

  • 原理:父级div定义zoom:1来解决IE浮动问题,结尾处加br标签clear:both
  • 建议:不推荐使用,只作了解
  • 评分:★☆☆☆☆

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/402851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vi and vim 用法

a 在当前光标后面插入字符 i 在当前光标前面插入字符 I 在当前行首插入字符 A 在当前行尾插入字符 o(字母)在当前光标下一行插入字符 O(字母)在当前光标上一行插入字符 b移动光标到当前字符串的第一个字符 B移动光标到当前行的第一个字符(以空格分隔) cc 删除光标所在行并编辑 …

CentOS 7 yum 安装php5.6

配置yum源 追加CentOS 6.5的epel及remi源。 # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm # rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm以下是CentOS 7.0的源。 # yum install epel-release # rp…

h5下载静态文件

1.需要将文件放src的下面的static的文件夹内 2.如果下载的是浏览器不能识别的&#xff08;例如&#xff1a;.exe,.zip,.doc等&#xff09;内容&#xff0c;浏览器会直接进行下载&#xff0c;但是如果下载的是浏览器可以识别的&#xff08;例如&#xff1a;.png,.jpg等&#xff…

浮动的清除 -- 四种方法

From: https://www.cnblogs.com/gchlcc/p/5824200.html 前言 -- 一个父亲不能被自己浮动的儿子&#xff0c;撑出高度。 开胃小菜 来看一个实验&#xff1a;现在有两个div&#xff0c;div身上没有任何属性。每个div中都有li&#xff0c;这些li都是浮动的。我们本以为这些li&a…

vue引入本地图片不显示;vue引入本地图片;

data () {return {imgUrl: require(/static/平安团意险.jpg), // 动态引入图片}},

目录索引

〇、接口、泛型、委托、事件 1.泛型和协变逆变2.委托和事件3.c#基础4.c#4.0协变逆变的理解一、linq等数据处理 1.数据查询2.数组3.linq 总结二、并行程序 1.并行性能简单分析三、编码技巧 1.考虑用类型代替参数检查2.c#没有指针导致的性能问题研究一二3.匿名函数递归4.代码设计…

equals和=,==的区别

一. 和equals的区别 1. 是运算符 2. equals是String对象的方法 一般有两种类型的比较 1. 基本数据类型的比较 2. 引用对象的比较 1. 基本数据类型的比较 和equals都比较的是值是否相等&#xff0c;相等则为true&#xff0c;否则为false 2. 引用对象的比较 和equals都是比较是栈…

eq相等,smarty 比较操作符!时间戳

2019独角兽企业重金招聘Python工程师标准>>> eq相等&#xff0c; ne、neq不相等&#xff0c; gt大于&#xff0c; lt小于&#xff0c; gte、ge大于等于&#xff0c; lte、le 小于等于&#xff0c; not非&#xff0c; mod求模。 is [not] div by是否能被某数整除&am…

阅读笔记四

学以致用 战国末期的思想家荀子曾经说过&#xff1a;“知之而不行&#xff0c;虽敦必困”。看到这句话&#xff0c;我想大家都知道它的意思&#xff0c;懂得许多道理却不付诸实践&#xff0c;虽然知识很丰厚&#xff0c;也必将遇到困厄。 没错&#xff0c;在这半个多月当中&…

推荐!!!【大杂烩】url、file、blob、base64互相转换

url地址或file文件获取base64 base64转blob blob或file转url&#xff1a; 使用URL.createObjectURL()方法读取出url js读取图片不同信息流

html页面通过特殊链接:打电话,发短信,发邮件详细教程

From: http://www.cnblogs.com/liuhongfeng/p/4976599.html 采用url href链接的方式&#xff0c;实现在Safari ios&#xff0c;Android 浏览器&#xff0c;webos浏览器&#xff0c;塞班浏览器&#xff0c;IE&#xff0c;Operamini等主流浏览器&#xff0c;进行拨打电话功能。…

Photoshop切图学习

前端开发中&#xff0c;之前都是Designer给我们切好图&#xff0c;给出readline&#xff0c;所以我们前端工程师基本不自己动手切图&#xff0c;现在换了新的公司&#xff0c;需要我们自己手动切一些图。Designer制作好的psd的图片如下&#xff1a; 自己想达到以下要求&#xf…

【vant】van-list的滚动加载onload事件

1.van-list的滚动加载onload事件&#xff1a;onload莫名执行多次或者一直加载到所有数据。 2.官方说了&#xff0c;不能使用float和overflow。包括父级元素和html和body都不要用这些触发BFC的属性 3.滑动到底部会触发该事件&#xff08;一定要注意父级标签&#xff0c;甚至 htm…

C#操作XmlDocument对象 报缺少根节点 一一道来

C# 操作XmlDocument文档 1.第一步选择文件目录string FileNamestring.Empty;SaveFileDialog sfdnew SaveFileDialog();if(sfd.ShowDialog() DialogResult.OK){ FileName sfd.FileName; }FileStream fs;//判断文件是否存在if(!File.Exists(FileName)){ fs File.Create(…

微信小程序开发demo-地图定位

要求要完成的功能&#xff1a; 1.要完成的要点是城市定位。 2.就是切换城市。 首页我们先参照微信小程序开放的官方文档找到&#xff1a; 在这里我们可以找到”当前位置经纬度“ getLocation: function (){var that this wx.getLocation({success: function (res) {console.lo…

移动端H5下载后端文件

首先是手机H5移动端上&#xff0c;针对能直接打开的文件例如pdf等&#xff0c;下载是直接打开预览了。如果要真正保存到手机里&#xff0c;需要点击右上角三个点去那里面选择保存。对于非预览文件会直接下载。 而在有些浏览器里&#xff0c;是可以直接下载出文件的。感觉这个与…

[CSS] 眼下最流行的五大CSS框架,你都知道么?

From: http://developer.51cto.com/art/201710/555733.htm 如今&#xff0c;CSS框架越来越受欢迎&#xff0c;可以说已经应用到每一个网站上了。作为开发工具&#xff0c;CSS框架一直处于不断进化和改进的状态&#xff0c;因此我们强烈建议您关注眼下的趋势。这篇文章会带您了…

centos5.8上安装git server

Git 可以使用四种主要的协议来传输数据&#xff1a;SSH 协议&#xff0c;Git 协议和 HTTP 协议。下面将一一介绍如何在服务端和客户端搭建和使用git的这些协议。 基础环境&#xff1a; git server:172.16.29.24 centos5.8 git client:172.16.29.25 centos5.8 首先需要在两在机…

实验五——循环结构学习总结

1.本次课学习到的知识点&#xff1a; &#xff08;1&#xff09;循环结构四要素&#xff1a;循环初始化&#xff0c;循环条件&#xff0c;循环体&#xff0c;循环变量修改 &#xff08;2&#xff09;循环语句包括&#xff1a;while语句、do-while语句、for语句、break语句 cont…

前端复制字符串到excel生成表格

场景需求&#xff1a;前端页面有个按钮&#xff0c;点击时候会复制一段文本&#xff0c;然后将复制的文本直接copy黏贴到excel表格里&#xff0c;就会自动形成对应的表格数据。 以下代码可以直接复制使用&#xff08;有效的点赞支持一波&#xff09;&#xff1a; copyAll () {…