神烦之float
另外一篇文章 : 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的更多相关文章
- js实现省市区联动
先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...
- css float 浮动是个混球
得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性, 用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢, 甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+ ...
- CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
- 在树莓派Raspbian下安装支持Hard Float的.NET环境
[题外话] 最近入了个树莓派玩,系统装的官方推荐的Hard Float的Raspbian,由于衍生自Debian,所以Mono什么的非常好装.但是官方源中的Mono在Hard Float的Raspbi ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- CSS float 定位和缩放问题
今天调试一个看起来很简单的前端问题,但却花了太多的时间,示例代码: <!DOCTYPE html> <html> <head> <title></ ...
- chrome中不可见字符引发的float问题
起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang=& ...
- c# float显示时保存一位小数
UI显示时候,需求保留一位小数 //保留一位小数 参考: http://blog.sina.com.cn/s/blog_620531730100kfz6.html float ff = 1.01f; ...
- 前端之float的几种清除浮动方式
前端之float的几种清除浮动方式 本节内容 1.float清除方式1 2.float清除方式2 3.float清除方式3 4.float清除方式4 1.float清除方式1 <!DOCTYPE ...
随机推荐
- day11---函数对象、名称空间、作用域、闭包函数
一.函数对象: 定义:函数对象就是函数名,函数名就是存放了函数的内存地址,存放了内存地址的变量就是对象 函数对象的应用: 可以直接被引用:(fn = cp_fn) 可以当做参数传递传递: comput ...
- 重置 Mac 上的 NVRAM 或 PRAM
https://support.apple.com/zh-cn/HT204063 如果 Mac 出现了与 NVRAM 或 PRAM 中储存的设置有关的问题,那么进行重置可能会有帮助. NVRAM( ...
- Luogu P3379 【模板】最近公共祖先(LCA)
qwq 预处理出从$x$节点向上跳2i个节点的序号$p[x][i]$及节点深度$dpth[x]$, 寻找$lca$时,从$Max$(可能的最大深度)到0枚举$i$, 首先把较深的一个节点向上跳至深度相 ...
- Android Wear创建一个通知
创建Android Wear的通知实际上和手机上创建没啥区别,主要是多了几个新类,只要用熟悉了一切都好办了.(如果只是测试通知,则直接运行wear app就能够看到效果) 创建一个简单的wear通知分 ...
- C# 下载文件
最近一段时间,真的是太忙太忙了!经历了自我毕业以来最忙碌的一个项目! 说起这个项目,我有万千感慨 且不说技术能力,也无需谈论项目需求.单就项目压力,日常加班,周六日补班而言,我相信很多人是扛不住的! ...
- 基于ASP.NET 4.0开发的微商城系统OdnShop,开源发布
基于ASP.NET 4.0开发的开源微商城系统,我们的目标是构建一个核心完善而又轻量级的微商城平台,目前基本的核心功能,包括微信登陆/支付,产品管理,购物车与订单管理等,轻量级是为了更加便于理解源码和 ...
- Windows Community Toolkit 4.0 - DataGrid - Part03
概述 在上面一篇 Windows Community Toolkit 4.0 - DataGrid - Part02 中,我们针对 DataGrid 控件的 Utilities 部分做了详细分享.而在 ...
- nodejs简单模仿web.net web api
最近用了asp.net web api + EF开发一个项目,但是移植到linux时遇到问题(mono只支持EF6.0,但是mysql驱动不支持EF6.0).所以决定换个思路,用nodejs实现res ...
- linux shell中单引号、双引号、反引号、反斜杠的区别
摘自http://www.jb51.net/article/33495.htm 1. 单引号 ( '' ) # grep Susan phonebook Susan Goldberg 403-212- ...
- 根据指定条件使CheckBox 无法选中
var trList = $("#tab1").children("tr")for (var i=0;i<trList.length;i++) {var ...