另外一篇文章 : 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. leetcode 344. Reverse String 、541. Reverse String II 、796. Rotate String

    344. Reverse String 最基础的旋转字符串 class Solution { public: void reverseString(vector<char>& s) ...

  2. 洛谷题解 P1138 【第k小整数】

    蒟蒻发题解了 说明:此题我用的方法为桶排(我翻了翻有人用了桶排只不过很难看出来,可能有些重复的,这个题只是作为一个专门的桶排来讲解吧) (不会算抄袭吧 ‘QWaWQ’) 简单来说(会的人跳过就行): ...

  3. 2018-2019-2 20175310实验一《Java开发环境的熟悉》实验报告

    2018-2019-2 20175310实验一<Java开发环境的熟悉>实验报告 一.实验步骤及内容 (一).Java开发环境的熟悉-1 1.建立20175310exp1的目录 2.在20 ...

  4. pycharm2018.3版 永久激活

    pycharm2018.3版  永久激活 如需转发,请注明出处:小婷儿的python  https://www.cnblogs.com/xxtalhr/p/10258257.html 激活前准备工作 ...

  5. [MicroPython]TPYBoardv102自动浇花系统

    1.系统功能 监测土壤湿度.环境温度.光照强度 根据当前环境自动浇水,寒冷天气自动加热土壤 2.所需元器件 TPYBoard板子1块 光敏模块1块 DS18B20模块1块 土壤湿度检测模块1块 杜邦线 ...

  6. Laravel5:重定向 redirect 函数的详细使用

    Laravel5 中新增了一个函数 redirect() 来代替 Laravel4 中 Redirect::to() 来进行重定向操作.函数 redirect() 可以将用户重定向到不同的页面或动作, ...

  7. 给ubuntu换内核

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 下载内核源码 有两种方式,一种方式是直接从官网:https://www.kernel.org/直接下载,另一种方 ...

  8. .net core 简单项目的创建

    1.linux 安装net coref https://www.microsoft.com/net/learn/get-started/linuxubuntu 2.创建目录 2.创建控制台项目 第一次 ...

  9. Java多线程编程核心技术(二)对象及变量的并发访问

    本文主要介绍Java多线程中的同步,也就是如何在Java语言中写出线程安全的程序,如何在Java语言中解决非线程安全的相关问题.阅读本文应该着重掌握如下技术点: synchronized对象监视器为O ...

  10. 【C# 复习总结】类、继承和接口

    1 类 定义新的数据类型以及这些新的数据类型进行相互操作的方法 定义方式: class Cat { } class Cat:object { } C#中所有的类都是默认由object类派生来的,显示指 ...