浮动float一般跟left或是right:

特性:

1,包裹性:浮动文本类型时,需要指定宽度width,如果不指定,就会折叠到最小宽度;

2,浮动会影响别的元素;

3,子级浮动,会导致父级高度塌陷。

表现:

1,浮动会脱离文档流(不受块级控制);

2,浮动不会超越到padding;

3,行内元素浮动后自动变成块级。

例子:

输出是:

在加上

.ti,.t2{

float:left;

}

变为:

这是个很简单的例子,但是在实践中这个大有用处!

CSS中的趣事之float浮动的更多相关文章

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

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

  2. 装载:对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨   对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...

  3. css中常见几种float方式以及倒计时(刷新页面不清)

    css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...

  4. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  5. CSS中的position和float

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  6. (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  7. css中:overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  8. 关于css中float的理解

    感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...

  9. 【Web】CSS中的浮动float

    CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...

随机推荐

  1. Virtual IP address

    https://en.wikipedia.org/wiki/Virtual_IP_address Virtual IP address From Wikipedia, the free encyclo ...

  2. 不同节点 IP 时间同步 分布式时间同步系统的参考时间获取技术分析

    linux linux下时间同步的两种方法分享_LINUX_操作系统_脚本之家 http://www.jb51.net/LINUXjishu/73979.html 分布式时间同步系统的参考时间获取技术 ...

  3. cgi fastcgi wsgi nginx python Dispatching TurboGears Python via FCGI

    https://www.nginx.com/resources/wiki/start/topics/examples/simplepythonfcgi/ 117 2018-06-28 19:56:42 ...

  4. JDBC连接数据库查询信息的步骤(提取成配置文件方式)

    硬编码格式的弊端:数据库发生改变时,要重新修改代码,重新编译和部署 解决方法:将数据库信息写在配置文件当中,让程序通过读取配置文件来获得这些信息 jdbc.driver.class=com.mysql ...

  5. win10 tortoiseSVN文件夹及文件图标不显示解决方法

    对于SVN来说,因为每个图标都代表着不同的含义,预示着不同的状态,是指示灯的作用,如果没有正确的图标很可能造成数据的丢失等. 输入:win+R,输入regedit,调出注册表信息,按下Ctrl+F,在 ...

  6. (2)mac下安装MySql数据库软件

    一,软件下载: https://dev.mysql.com/downloads/mysql/ 也可以从其他资源下载.不一定非要官方下载 二,安装 这个比较简单,之间双击开启安装程序,一直下一步就可以. ...

  7. YTU 2912: 圆柱体的C++

    2912: 圆柱体的C++ 时间限制: 1 Sec  内存限制: 128 MB 提交: 333  解决: 133 题目描述 小明的弟弟加入的C++兴趣小组,组长布置的第一个任务就是将已有的C程序改写成 ...

  8. POSTMAN模拟数组数据

    有时候写接口,需要传入数据数据.比如购物车中的一组商品.它们的数量是不固定的,只能用数组才能更好的处理. 怎么用POSTMAN模拟呢? 万能的POSTMAN.

  9. JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回 out.print(ja);

    JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回out.print(ja);

  10. Spring 各种注解(@)的含义与认识

    依赖注入,从字面上理解,即是:以注入的方式实现依赖: Spring 容器负责创建应用程序中的 bean,并通过 DI(依赖注入)来协调这些对象之间的关系.当描述 bean 如何进行装配(autowir ...