另外一篇文章 : 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. 修复XSS跨站漏洞

    XSS跨站漏洞最终形成的原因是对输入与输出没有严格过滤. 1.输入与输出 在HTML中,<,>,",',&都有比较特殊的意义.HTML标签,属性就是由这几个符合组成的.P ...

  2. 理解 vue-router的beforeEach无限循环的问题

    在理解beforeEach无限循环之前,我们先来看一下beforeEach相关的知识点,该篇文章的项目是基于 express+vue+mongodb+session实现注册登录 这篇文章项目基础之上进 ...

  3. PEP8 python规范神器

    如需转载,请注明出处:小婷儿的博客:https://www.cnblogs.com/xxtalhr/p/10645992.html 一.Jupyter notebook 篇 Jupyter noteb ...

  4. ZOJ - 2423-Fractal

    A fractal is an object or quantity that displays self-similarity, in a somewhat technical sense, on ...

  5. C#.NET 大型通用信息化系统集成快速开发平台 4.6 版本 - SSO单点登录接口

    当开发的系统多了.用户多了.合作伙伴多了.对接厂商多了.开发人员多了.部署的服务器也多了,各种安全问题就暴露出来了. 如何安全的把这些系统集成在一起?实现集群的单点登录.严格统一的用户安全体系管理? ...

  6. 基于Tornado签名cookie源码设计API认证

    想法1 服务端客户端个保存相同的一串字符串,客户端发送API请求时带着这段字符串来我服务端做校验,通过则返回相应数据,否则拒绝访问 弊端 黑客截取到请求信息,可直接会获取到该字符串,想服务端发送请求并 ...

  7. VMware(威睿)后端开发笔试题总结

    1.   Linux中查看系统的发行版本信息 的命令? cat/etc/issue    和    lsb_release 2.   linux 挂载一个共享文件夹: mount  -t  cifc ...

  8. 1000/problem/A

    传送门: [http://codeforces.com/contest/1000/problem/A] 题意: 一个比赛颁奖,要准备T-Shirt给获奖者,但有的去年获奖过,衣服尺寸可以不改,有的需要 ...

  9. Sagheer and Nubian Market CodeForces - 812C (二分)

    On his trip to Luxor and Aswan, Sagheer went to a Nubian market to buy some souvenirs for his friend ...

  10. Java Core - JVM运行时内存管理

    在读正文之前,阅读以下两篇博客学习并理解堆栈.作用域.本地方法的概念. 作用域:https://www.cnblogs.com/AlanLee/p/6627949.html 操作数栈:https:// ...