清楚浮动4种方式

2019-07-14 admin

清除浮动:根据情况需要来清楚浮动 。

清除浮动的目的: 就是为了解决 父 盒子高度为0 的问题。

1.、额外标签法 给浮动盒子的后面添加一个新的div

2、overflow:hidden 触发了bfc模式,就不用清除浮动了 bfc模式:http://www.cnblogs.com/dojo-l…

3、伪元素 网易搜狐常用

.clearfix:after{

      content:””;

      visibility:hidden; 

      display:block;

      height:0;

      clear:both;

 }

.clearfix{  //IE6模式下

  zoom:1;

}

清除浮动: 真正的叫法 闭合浮动

4、 双伪元素 小米,淘宝常用

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>Document</title> <style type=“text/css”> .father{ width: 600px; height: auto; border:1px solid red; } .child1,.child2{ background: pink; width: 250px; height: 250px; float: left; } .clearfix:before,.clearfix:after{ /真正意义上的闭合浮动/ display: table; content: “”; } .clearfix:after{ clear:both; } .clearfix{ //IE6 zoom:1; } </style> </head> <body> <div class=“father clearfix”> <div class=“child1”>哥哥</div> <div class=“child2”>妹妹</div> </div> </body> </html>

[转载]原文链接:https://segmentfault.com/a/1190000019754340

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69684.html

文章标题:清楚浮动4种方式

相关文章
详解angular2采用自定义指令(Directive)方式加载jquery插件
由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@...
2017-03-17
JavaScript函数参数使用带参数名的方式赋值传入的方法
本文实例讲述了JavaScript函数参数使用带参数名的方式赋值传入的方法。分享给大家供大家参考。具体分析如下: 这里其实就是在给函数传递参数的时候,可以使用 参数名:参数值的方式传递,这样不会传递错。不过下面的代码是通过字典来实现的,不像...
2017-03-21
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2015-12-22
js跨域请求的5中解决方式
跨域请求数据解决方案主要有如下解决方法: JSONP方式 表单POST方式 服务器代理 Html5的XDomainRequest Flash request 分开说明: 一、JSONP: 直观的理解: 就是在客户端动态注册一个函数 fun...
2017-03-26
详解bootstrap的modal-remote两种加载方式【强化】
方法一: 使用链接 &lt;a href=&quot;demo.jsp&quot; data-toggle=&quot;modal&quot; data-target=&quot;#mymodal&quot;&gt;打开&lt;&#x2F;...
2017-02-16
JavaScript中调用函数的4种方式代码实例
1:方法调用模式 var myObj = {&#x2F;&#x2F;对象字面量 param1: 1, param2: 2, sum: function (){ &#x2F;&#x2F;this关键字只带当前的对象 return ...
2017-03-27
coffeescript使用的方式汇总
Coffeescript作为Javascript低调的小弟实在是有过人之处,使用它可以增进开发效率,减少代码错误, 关键是能大幅提升开发愉悦感。我越来越觉得只要可能就在自己的项目中把coffee用起来。 然而也许你和我一样,在了解完coff...
2017-03-29
javascript事件委托的方式绑定详解
js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。还有一个好处就是可以处理动态插入dom中...
2017-03-24
javascript多行字符串的简单实现方式
平时一般使用 字符串+,或者[].join(’’)的方式 同事推荐了这样的形式 ExceptionDivHtml=&quot;&lt;div class=&#x27;gameItems&#x27;&gt;\ &lt;div class=&...
2017-03-23
移动端点击态处理的三种实现方式
前言 在开发移动端页面的时候,为了提高用户体验,通常会给被触控的元素加上一个效果来对用户的操作进行反馈。这种反馈主要有三种实现方式,有需要的朋友们下面来一起看看吧。 一、伪类:active :active伪类常用于设定点击状态下或其他被激活...
2017-03-11
回到顶部