使用float会带来哪些影响:

  • 脱标:无行级块级之分;
  • 相互贴靠:若想之间有空隙可用margin与padding;
  • 顶边对齐;
  • 文字环绕;

当使用float后,子标签脱离父标签,父标签就会失去高度,此时光标上移,父标签下面的内容就会上升,影响布局,因此:

如何清除浮动带来的影响:

  • 设高法;给父标签设置高度;
  • clear:both;给不想受影响的标签设置;
  • overflow:hidden;内墙法,隐藏超出部分,谁想浮动就给自己加一个overflow;
  • clearfix;before 与after;

这里注意:在内墙法中,如想给子标签与父标签之间有距离,就子标签中设置margin,父标签中设置overflow:hidden;

clear fix中应有的内容:

content:“”;
display:block;

clear:both;

height:0;
visibility:hidden;
*zoom'1:为了兼容IE6、7

float---浮动带来的影响与清除浮动带来的影响方法----在路上(20)的更多相关文章

  1. 浮动float、浮动影响和清除浮动

    普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆放到合适的位置? CSS ...

  2. [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  3. CSS中清除浮动的作用以及如何清除浮动

    1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就 ...

  4. float包裹性与破坏性及清除浮动几种方法

    1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内 ...

  5. 父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)

    浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现.但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题: 1.浮动的元素会 ...

  6. css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

  7. 关于浮动&关于BFC规范&whyoverflow清除浮动

    https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https:/ ...

  8. CSS浮动并清除浮动(造成的影响)

    一.浮动 CSS浮动    CSS float浮动的深入研究.详解及拓展(一)    CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...

  9. float浮动导致父元素高度坍塌的原因及清除浮动方法

        一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在红色盒子内, ...

随机推荐

  1. 03.SQLServer性能优化之---存储优化系列

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概  述:http://www.cnblogs.com/dunitian/p/60413 ...

  2. 在.NET Core 里使用 BouncyCastle 的DES加密算法

    .NET Core上面的DES等加密算法要等到1.2 才支持,我们可是急需这个算法的支持,文章<使用 JavaScriptService 在.NET Core 里实现DES加密算法>需要用 ...

  3. Java初始化过程

    这篇文章主要讲解Java在创建对象的时候,初始化的顺序.主要从以下几个例子中讲解: 继承关系中初始化顺序 初始化块与构造器的顺序 已经加载过的类的初始化顺序 加载父类,会不会加载子类 创建子类对象会不 ...

  4. 当忘记mysql数据库密码时如何进行修改

    因为长时间没有使用数据库了,或者把密码改完之后就忘了数据库密码,不能正常进入数据库,也无法修改密码,有一个简单的常用修改密码方式: 1.首先找到和打开mysql.exe和mysqld.exe所在的文件 ...

  5. 9、委托、事件、Lambda

    开始 关于委托,肯定是要有问题的. 第一个问题,委托用来干什么? 看.net中的表述:在.net平台下,委托类型用来定义和相应应用程序中的回调.(回调?处理内存中两个实体双向通信的一种技术.)   第 ...

  6. .NET同步与异步之相关背景知识(六)

    在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...

  7. LINQ to SQL Select查询

    1. 查询所有字段 using (NorthwindEntities context = new NorthwindEntities()) { var order = from n in contex ...

  8. stringstream的基本用法

    原帖地址:https://zhidao.baidu.com/question/580048330.htmlstringstream是字符串流.它将流与存储在内存中的string对象绑定起来.在多种数据 ...

  9. 使用po模式读取豆瓣读书最受关注的书籍,取出标题、评分、评论、题材 按评分从小到大排序并输出到txt文件中

    #coding=utf-8from time import sleepimport unittestfrom selenium import webdriverfrom selenium.webdri ...

  10. 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现

    本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...