总结清除浮动的方法菜鸟教程_浮动使用帮助

方法一、在结尾处添加空div标签clear:both在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.

1

<div class="sien

总结清除浮动的方法菜鸟教程

方法一、在结尾处添加空div标签clear:both

在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.

总结清除浮动的方法菜鸟教程_浮动使用帮助

注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.

<div class="box">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
    <div class="clear"></div>
</div>

方法二、父级div定义 overflow: auto

原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值

<div class="box over-flow">
    <div class="red">1</div>
    <div class="sienna">2</div>
    <div class="blue">3</div>
</div>

方法三、使用伪元素来清除浮动(:after,注意:作用于浮动元素的父亲)

(注:主要推荐该方法)

.clearfix:after{
    content:"";/*设置内容为空*/
    clear:both;/*清除浮动*/
     display:block;/*将文本转为块级元素*/
    height:0;/*高度为0*/
    visibility:hidden;/*将元素隐藏*/
}
.clearfix{
    zoom:1;/*为了兼容IE*/
}

end~~~

海计划公众号
(0)
上一篇 2020/03/20 23:49
下一篇 2020/03/20 23:49

您可能感兴趣的内容

  • weui-wxss小白基础_WeUI for 小程序 为微信小程序量身设计

    weui-wxss小白基础 GitHub:https://github.com/Tencent/weui-wxss 简介描述:WeUI for 小程序 为微信小程序量身设计 WeU…

    2020/03/11
  • avaScript与WebAssembly进行比较菜鸟攻略在哪些情况下会优于JavaScript入门基础知识_js知识

    这是专门探索JavaScript及其构建组件的系列。在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。如果你错过了前面的章节,你可以在这里找到它们:关于引擎,运行时和调用堆栈的概述Google的V8引擎+ 5个

    2020/04/05
  • nodebestpractices入门百科_NodeJS最佳实践

    nodebestpractices入门百科 官方网址:https://twitter.com/nodepractices/ GitHub:https://github.com/i0…

    2020/03/06
  • vue-multiselect基础教程_Vue.js 打造的下拉组件

    vue-multiselect基础教程 官方网址:https://vue-multiselect.js.org GitHub:https://github.com/shentao/…

    2020/03/06
  • 需要避免的五个防火墙配置错误小白知识_攻击小白攻略

    防火墙配置错误可能与没有防火墙一样危险。人们需要了解五个常见的防火墙配置错误,这些错误将让任何组织都容易受到攻击。防火墙是抵御所有类型网络入侵者的主要防线,但即使具有多年的实践和丰富的经验,许多组织仍然会犯配置错误,使其网络容易受到数据窃取、丢失以及其他类型的破坏。以下是组织应该不惜一切代价需要避免的五种防火墙错误配置:1.未能正确配置和协调防火墙,并使用越

    2020/03/24
  • php是做前端的吗?教程视频_php使用指南

    php是做前端的吗不是,php是后台脚本语言,由服务器执行。PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习,使用广泛,主要适用于Web开发领域。前端开发和后台开发是有区别的,工作的内容和负责的东西是完全的不

    2020/03/24
  • 测试工具比较:选Jest,不选Mocha小白教程_测试指南教程

    我们Automattic公司的WordPress.com是由Calypso项目推动的,而这个项目中所有的测试用的都是Mocha框架。项目中还包括端到端测试,都保存在自己独立的代码库里。这套设定我们已经用了三年多了,我觉得是时候该重新审查一下这个选择。我发现这篇[单元测试工具的比较]文章(https://mo.github.io/2017/06/05/java

    2020/04/06
  • 一道面试题引起的思考小白帮助_面试小白攻略

    今天在认真干(划)活(水)的时候,看到群里有人发了一道头条的面试题,就顺便看了一下,发现挺有意思的,就决定分享给大家,并且给出我的解决方案和思考过程。题目如下:实现一个get函数,使得下面的调用可以输出正确的结果const obj = { selector: { to: { toutiao: “FE Coder”} }, target: [1, 2, { n

    2020/04/03
  • javascript如何进行错误处理?教程视频_错误入门基础

    错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较差的用户体验。由于任何javascript错误都可能导致网页无法使用,因此作为开发人员,必须要知道何时可能出错,为什么会出错,以及会出什么错。本文将详细介绍javascript中的错误处理机制。Error具有下面一些主要属性:description: 错误描

    2020/03/24
  • vue 修改变量值无法渲染到页面小白入门_渲染基础知识教程

    开发中碰到这么个问题,修改对象中的属性无法渲染页面。直接操作ccc变量就是没问题的。直接贴我的代码data() {return {aaa: {bbb: false},ccc: false}
    }解决方法一:注意,第二个参数是字符串类型,切记。this.$set(this.aaa, ‘bbb’, ‘111’)解决方法二:this.aaa.bbb = ‘111’

    2020/03/30
  • Vue与ref属性与refs的使用入门基础教程_属性指南教程

    ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例。注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册1.DOM元素上使用 <div class="edit-input" :class

    2020/03/30
  • 九大Java性能调试工具使用指南_调试小白教程

    NetBeans ProfilerNetBeans中可以找到NetBeans Profiler。NetBeans分析器是NetBeans的扩展,用于为NetBeans IDE提供分析功能。NetBeans IDE是一个开源的集成开发环境。NetBeans IDE支持开发所有Java应用程序类型(Java SE(包括JavaFX),Java ME,Web,EJ

    2020/03/23
  • JS小数运算失精度的问题入门指南_运算基础知识教程

    浮点数值的最高精度是17位小数,但在进行运算的时候其精确度却远远不如整数;整数在进行运算的时候都会转成10进制; 而java和JavaScript中计算小数运算时,都会先将十进制的小数换算到对应的二进制,一部分小数并不能完整的换算为二进制,这里就出现了第一次的误差。待小数都换算为二进制后,再进行二进制间的运算,得到二进制结果。然后再将二进制结果换算为十进制,

    2020/03/26
  • js实现合并两个有序数组入门攻略_算法基础教程

    给定两个有序整数数组arr1和arr2,将 arr2和arr1进行合并为一个单调非递减的数组,并将其输出。方法一、利用循环:function mergeArray(arr1,arr2){var ind1=0; //标记arr1的对比元素的初始索引值var ind2=0; //标记arr2的对比元素的初始索引值var arr=[]; //作为输出的新数组whi

    2020/04/03
  • 前端需要了解的后端知识入门指南_前端小白知识

    一名有前端工程师,除了掌握自身知识体系外,在业余时间也应该了解下后端的知识时间,由于前端与后端工作是最最密切相关的,多学习些后端知识对自身也是大有好处的。1、后端语言后端语言用来写后台的三巨头:PHP、JAVA、ASP.NET三门语言各有特色,php轻量级开发,适合开发论坛和bbs的后台。java就不用说了,比较大型的项目的后台都是用java写的。工作的需求

    2020/04/03
  • MVVM 原理重难点小白入门_mvvm入门基础知识

    今天花上 10 分钟,针对 MVVM 这个面试必考点,简简单单的来给大家划一下重难点划重点MVVM 双向数据绑定 在Angular1.x版本的时候通过的是 脏值检测 来处理而现在无论是React还是Vue还是最新的Angular,其实实现方式都更相近了那就是通过 数据劫持+发布订阅模式真正实现其实靠的也是ES5中提供的 Object.defineProper

    2020/03/23