浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置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. Golang:使用 httprouter 构建 API 服务器

    https://medium.com/@gauravsingharoy/build-your-first-api-server-with-httprouter-in-golang-732b7b01f6 ...

  2. 南天PR2、PR2E驱动下载,xp,win7,win8,win8.1,win10 32位64位驱动下载安装教程

    家里开淘宝店,有个针式打印机驱动.电脑各种换系统,为了装这个驱动可是废了不小的劲.不敢独享,所以现在把各种驱动以及安装教程分享出来. 注意: 打印机在开机状态下,电脑在开机状态下,不要插拔连接线!!! ...

  3. 获取Django项目的全部url

    在为一个项目添加权限时,遇到一个问题,就是为项目所有的url设置权限,但是一个一个手动输入太麻烦了,所以考虑用代码获取到一个项目所有的url 首先,考虑到项目最外层的urlpartterns,因为所有 ...

  4. (转)Java开发中的23种设计模式详解

    原文出自:http://blog.csdn.net/zhangerqing 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型 ...

  5. 开源的JavaScript插件化框架MinimaJS

    本文介绍我开发的一个JavaScript编写的插件化框架——MinimaJS,完全开源,源码下载地址:https://github.com/lorry2018/minimajs.该框架参考OSGi规范 ...

  6. MySql sql按时间分组

    select DATE_FORMAT(f.upload_time,'%Y%u') weeks,count(*),sum(p.download_times),sum(p.collection_times ...

  7. java:凯撒密码及String的应用

    一,凯撒密码 古罗马皇帝凯撒在打仗时曾使用过以下方法加密军事情报 现在用java实现 程序设计思想: 1,字符串首先要转化为字符数组,才能依次加密 2,当原来的字符为X,Y,Z时,加密后要转化为A,B ...

  8. Single linked list by cursor

    有了指针实现看似已经足够了,那为什么还要有另外的实现方式呢?原因是诸如BASIC和FORTRAN等许多语言都不支持指针,如果需要链表而又不能使用指针,那么就必须使用另外的实现方法.还有一个原因,是在A ...

  9. 使用angular4和asp.net core 2 web api做个练习项目(二), 这部分都是angular

    上一篇: http://www.cnblogs.com/cgzl/p/7755801.html 完成client.service.ts: import { Injectable } from '@an ...

  10. svg snap 笔记

    路径中的字母,大写相对于左上角绝对定位,小写相对定位  M110,95,95,110M115,100,100,115   pattern 类似于图片拼贴,可以把指定位置的图案用来填充 var patt ...