另外一篇文章 : 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. Sphinx 生成 Windows 帮助文件 (.chm文件)

    本文不介绍 Sphinx 的用法,只简要罗列 Windows 下生成 .chm 文件的步骤. 0. 首先检查机器是否安装了 HTML Help Workshop 软件,一般安装路径应该是 C:\Pro ...

  2. CentOS 安装 clang

    Clang是一个C语言.C++.Objective-C.Objective-C++语言的轻量级编译器.源代码发布于BSD协议下.2013年4 月,Clang已经全面支持C++11标准,并开始实现C++ ...

  3. hdu - 2586 (LCA板子题)

    传送门 (这次的英文题面要比上一个容易看多了) (英语蒟蒻的卑微) 又是一个很裸的LCA题 (显然,这次不太容易打暴力咧) (但听说还是有大佬用dfs直接a掉了) 正好 趁这个机会复习一下LCA 这里 ...

  4. Android/Linux boot time分析优化

    如果需要优化boot time,就需要一个量化的工具来分析每个阶段的时间消耗.这种类型的优化特别适合使用基于timeline的图表,有着明显的时间顺序.要求不但能给出整个流程消耗的时间,还要能对流程进 ...

  5. Express+MongoDB开发web后台接口MongoDB

    摘要: Express开发web接口; 安装MongoDB,启动.连接MongoDB服务台; 使用nodejs和mongoose模块链接和操作MongoDB; 一.Express开发web接口 exp ...

  6. https证书过期问题

    这个是以前配置证书的文章,同时更新证书的有效的一篇文章 最近网站的https证书过期了,造成无法对外提供服务,怀疑是当时配置的自动更新没有起作用. 然后去后台更新https证书,却遇到了问题,使用的具 ...

  7. UIToolBar - 官方文档

    继承关系:UIToolBar -> UIView -> UIResponder -> NSObject. toolBar是一个工具栏,用于显示一个或多个按钮.其按钮叫做toolBar ...

  8. DIV CSS float浮动

    一.浮动? #CSS样式的float浮动属性,用于设置标签对象(如:<div>标签盒子.<span>.<a>.等html标签)的浮动布局. #通过定义浮动(floa ...

  9. Spring_AOP 记录系统关键操作日志用法

    问题: 系统需要记录用户的关键操作日志,以便后期的系统维护,方便的查看问题,及时排除 分析: (1)保存字段:作为一个日志记录功能,首先数据库新建一张表保存用户的操作关键字段, 用户名,ip,操作描述 ...

  10. Codeforces Round #521 (Div. 3)

    B 题过的有些牵强,浪费了很多时间,这种题一定想好思路和边界条件再打,争取一发过.  D 题最开始读错题,后面最后发现可以重复感觉就没法做了,现在想来,数据量大,但是数据范围小枚举不行,二分还是可以的 ...