另外一篇文章 : css float

一 历史

  Float的设计初衷仅仅是:文字环绕效果(向word中的文字环绕效果)

二 特性

  1.包裹性:块级元素如果不设置float,它默认会撑满整个屏幕,而如果设置了float,则只会包裹住其内容。

    例子:

     没有float的div:

     

     添加了float的div:

     

  2.破坏性:设置了float的元素会脱离文档流,会导致其父元素出现“坍塌”的现象(如果父元素中没有其他子元素,或者其他子元素均设置了浮动,父元素的height会变成0)

  3.清除空格。

三 清除浮动的影响

  通常做法(1或2):  

    1.在父元素底部增加一个<div style="clear:both;"></div>;

    2.设置父元素的伪类选择器样式:

      .parentElement:after{content:"";display:block;clear:both;}

      注意:使用伪类选择器,ie6/7识别不了。

神烦之float的更多相关文章

  1. js实现省市区联动

    先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...

  2. css float 浮动是个混球

    得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性, 用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢, 甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+ ...

  3. CSS float 浮动属性

    本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...

  4. 在树莓派Raspbian下安装支持Hard Float的.NET环境

    [题外话] 最近入了个树莓派玩,系统装的官方推荐的Hard Float的Raspbian,由于衍生自Debian,所以Mono什么的非常好装.但是官方源中的Mono在Hard Float的Raspbi ...

  5. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  6. CSS float 定位和缩放问题

    今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码: <!DOCTYPE html> <html> <head> <title></ ...

  7. chrome中不可见字符引发的float问题

    起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang=& ...

  8. c# float显示时保存一位小数

    UI显示时候,需求保留一位小数 //保留一位小数 参考: http://blog.sina.com.cn/s/blog_620531730100kfz6.html float ff = 1.01f; ...

  9. 前端之float的几种清除浮动方式

    前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...

随机推荐

  1. 利用Oracle分析函数row_number和sys_connect_by_path实现多行数据合并为一行

    emo场景,以oracle自带库中的表emp为例: select ename,deptno from emp order by deptno; ENAME DEPTNO CLARK 10 KING 1 ...

  2. .net core jwt

    https://www.cnblogs.com/JacZhu/p/6837676.html

  3. RabbitMQ 惰性队列Lazy Queue

    RabbitMQ 队列分为几种类型,按照不同维度来分,可以分为排他性队列.普通队列.延迟队列.惰性队列.发布订阅队列等. 今天我们讨论的主角是惰性队列 Lazy Queue.众所周知,队列可以存储消息 ...

  4. python第六章:三大利器(装饰器,迭代器,生成器)--小白博客

    python装饰器 什么是装饰器?在不修改源代码和调用方式的基础上给其增加新的功能,多个装饰器可以装饰在同一个函数上 # 原理(个人理解):将原函数(bar)的内存地址重新赋值,进行覆盖.新值为装饰器 ...

  5. koa-router

    为了处理URL,我们需要引入koa-router这个middleware,让它负责处理URL映射. 我们把上一节的hello-koa工程复制一份,重命名为url-koa. 先在package.json ...

  6. javaMail发邮件,激活用户账号

    用javamail实现注册用户验证邮箱功能.用户注册后随机生成一个uuid作为用户的标识,传递给用户然后作为路径参数.发送html的内容到用户注册的邮箱里,若用户点击后去往的页面提交username和 ...

  7. sso单点登录系统(解决session共享)

    场景:假设一个用户将自己的登录信息提交到后台,如果session保存的信息分布在多台机器上,并且不共享,那么可能导致用户的登录信息出现短暂的丢失,为什么这样讲,因为用户访问服务器中间还要经过负载均衡服 ...

  8. Podfile文件用法详解

    https://www.jianshu.com/p/b8b889610b7e 2018.01.09 15:51* 字数 2343 阅读 6263评论 3喜欢 34 前言 iOS开发会经常用到cocoa ...

  9. 在Git中添加一个项目

    首先保证Git服务器正确配置,管理员机器可正常连接并使用Git. 第一步:在服务器上新建一个项目仓库 切换到git用户: a@ubuntu:/home/git$ su - git $ cd /home ...

  10. 多线程系列之三:Immutable 模式

    一,什么是Immutable模式?immutable就是不变的,不发生改变的.Immutable模式中存在着确保实例状态不发生变化改变的类.这些实例不需要互斥处理.String就是一个Immutabl ...