CSS中的趣事之float浮动
浮动float一般跟left或是right:
特性:
1,包裹性:浮动文本类型时,需要指定宽度width,如果不指定,就会折叠到最小宽度;
2,浮动会影响别的元素;
3,子级浮动,会导致父级高度塌陷。
表现:
1,浮动会脱离文档流(不受块级控制);
2,浮动不会超越到padding;
3,行内元素浮动后自动变成块级。
例子:

输出是:

在加上
.ti,.t2{
float:left;
}
变为:

这是个很简单的例子,但是在实践中这个大有用处!
CSS中的趣事之float浮动的更多相关文章
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
- css中常见几种float方式以及倒计时(刷新页面不清)
css中常见几种float方式 http://jingyan.baidu.com/article/72ee561a670269e16138dfd5.html <script type=" ...
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS中的position和float
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)
一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...
- css中:overflow:hidden清除浮动的原理
要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...
- 关于css中float的理解
感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看 ...
- 【Web】CSS中的浮动float
CSS中的float 文章目录 CSS中的float 1.float浮动属性 2.float文字环绕图片 3.float浮动的真正原因以及副作用分析 4.清除浮动的四种解决方法 5.实际应用 导航效果 ...
随机推荐
- 前端富文本 js 版本
https://s3.pstatp.com/pgc/v2/resource/tt_ueditor_v3_temple/tt-editor.all.js?20180425
- Chart.js docs
原文链接:http://www.bootcss.com/p/chart.js/docs/ 引入Chart.js文件 首先我们需要在页面中引入Chart.js文件.此工具库在全局命名空间中定义了Char ...
- 设计模式-(8)外观(swift版)
一,概念 为子系统中的一组接口提供一个统一的接口.外观模式定义了一个更高层次的接口,这个接口使得这一子系统更加容易使用. 二,结构图 (1)SubSystem子系统类:每个子系统定义了相关功能和模块的 ...
- BZOJ_1511_[POI2006]OKR-Periods of Words_KMP
BZOJ_1511_[POI2006]OKR-Periods of Words_KMP Description 一个串是有限个小写字符的序列,特别的,一个空序列也可以是一个串. 一个串P是串A的前缀, ...
- [TJOI2016&HEOI2016] 排序
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4552 [算法] 首先 , 二分答案x , 将比x小的数看作1,比x大的数看作0 然后 ...
- JVM从理论到实践
这里实践不是指动手写JVM,而是动手做实验,结合日常工作相关的部分,理论与实践结合从而对这块知识有更深入的认识. 随着Java10的到来,JVM这块也有不少调整改进,网上大部分内容都是过时或大部分开发 ...
- 杂项-Java:Thymeleaf
ylbtech-杂项-Java:Thymeleaf Thymeleaf is a modern server-side Java template engine for both web and st ...
- Silverlight 后台利用代码触发 Button 的Click事件
页面上一个查询按钮,当用户点击 回车键 的时候 处罚查询按钮的onclick事件 public MainPage() { InitializeComponent(); this.KeyDown += ...
- Application 效能分析有妙招 — 使用 perf 走天下(转载)
转载:http://tech.mozilla.com.tw/posts/1803/application-%E6%95%88%E8%83%BD%E5%88%86%E6%9E%90-%E4%BD%BF% ...
- bzoj 2784: [JLOI2012]时间流逝【树形期望dp】
来自lyd课件 发现s和last(s),next(s)成树结构,然后把式子化简成kx+b的形式,做树形dp即可 #include<iostream> #include<cstdio& ...