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

        1.浮动的元素会相对于父容器或者是前面已经定位的元素进行浮动,浮动的元素脱离文档流,也就是不再占有原有的位置,会影响后面的元素或者是父容器

        2.父容器正常情况下会自动扩高,但是子元素加了浮动后位置不保留,父容器就感觉它不存在了,所以不会扩高。

所以,在编写静态网页时,一定要注意浮动的清除问题,一段清除浮动代码可以方便调用:

         .clearFloat:after{

                content:' ';

                display:block;

                height:0;

                visibility:hidden;

}

          .clearFloat{

                zoom:1;

}

父类清除浮动的原因、(清除浮动代码,置于CSS中方便调用)的更多相关文章

  1. 【lombok】使用lombok注解,在代码编写过程中可以调用到get/set方法,但是在编译的时候无法通过,提示找不到get/set方法

    错误如题:使用lombok注解,在代码编写过程中可以调用到get/set方法,但是在编译的时候无法通过,提示找不到get/set方法 报错如下: 解决方法: 1.首先查看你的lombok插件是否下载安 ...

  2. css浮动现象及清除浮动的方法

    css浮动现象及清除浮动的方法   首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕   再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...

  3. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  4. 彻底理解浮动float CSS浮动详解 清除浮动的方法

    我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 ...

  5. CSS中如果实现元素浮动和清除浮动,看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  6. 【深入BFC】 关于CSS中float布局,清除浮动,和margin合并的原理解析,解开你心中的那些困惑!

    BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. ...

  7. css中的浮动以及清除浮动

    对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也 ...

  8. 关于CSS中清除浮动的方法

    在使用CSS样式时会经常使用到浮动(float),这时如果没有清除浮动就会造成很多怪异的现象,因此对父级元素清除浮动是必须要做的,这样也是书写CSS的一个良好习惯. 目前常用的方法大致有三种. (1) ...

  9. css浮动布局,浮动原理,清除(闭合)浮动方法

    css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相 ...

随机推荐

  1. OpenSCAD 建模:矿泉水瓶盖

    下载地址:https://github.com/ZhangGaoxing/openscad-models/tree/master/BottleCap 代码: module screw(r=){ ::] ...

  2. win10 + python3.6 + VSCode + tensorflow-gpu + keras + cuda8 + cuDN6N环境配置

    写在前面的话: 再弄这个之前,我对python也好,tensorflow也好几乎是0认知的,所以配置这个环境的时候,走了不少弯路,整整耗费了一个星期的时间才搭配完整这个环境,简直了...然而最气的是, ...

  3. Redis 学习笔记-5种数据类型的基本操作

    1.string类型 基本操作列表: GET 获取指定键对应的值 SET 设定键值 DEL 删除指定键对应的值(对所有数据类型都有效) > set hello world OK > get ...

  4. 聊聊Java中的反射(一)

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 反射reflection主要为了动态操作Java代码,它的主要功能体现在Java提供的refl ...

  5. du和df显示磁盘空间使用差异大的几种情况

     接触客户多了,发现经常有客户遇到du看到系统只使用了一部分磁盘空间,但df看时磁盘空间已经满了,或者差异较大,我遇到过三次不一样的原因,下面做一下总结,恶补一下!也希望对大家有点帮助! 现象:有客户 ...

  6. python爬虫如何入门

    学爬虫是循序渐进的过程,作为零基础小白,大体上可分为三个阶段,第一阶段是入门,掌握必备的基础知识,第二阶段是模仿,跟着别人的爬虫代码学,弄懂每一行代码,第三阶段是自己动手,这个阶段你开始有自己的解题思 ...

  7. Java--谈一谈代理

    一.代理概念    代理在我们日常生活经常听到这个名词,比如我们想看下google我们需要找个代理服务器来帮我们一下,比如我们想买一个外国的什么东西需要在代购网站或者找朋友帮忙在外国买一下,用概念一点 ...

  8. Leetcode题解(十)

    29.Divide Two Integers 题目 题目要求不用乘除和取模运算,实现两个整数相除: 我的第一想法就是把除法变成减法来做,这也是最初除法的定义,其实现代码如下: class Soluti ...

  9. 1026: [SCOI2009]windy数

    1026: [SCOI2009]windy数 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 8247  Solved: 3708[Submit][Sta ...

  10. 请求返回时的Size/Content Time/Latency的区别

    Size/Content: Size是响应头部和响应体结合起来的大小,Content是请求内容解码后的大小.进一步了解可以看这里Chrome Dev Tools - “Size” vs “Conten ...