神烦之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 ...
随机推荐
- Vim 中使用 vimim 来输入中文
Vim 中输入中文,要来回切换中英文,偶尔不慎的切换和按键,可能导致误删不能恢复的错误,一直是个很头疼的问题.现在有了 vimim 这个插件,整个世界清净了. 插件官方网站:http://www.vi ...
- 一本通 1212:LETTERS
题目描述 给出一个roe×col的大写字母矩阵,一开始的位置为左上角,你可以向上下左右四个方向移动,并且不能移向曾经经过的字母.问最多可以经过几个字母. 输入 第一行,输入字母矩阵行数R和列数S,1≤ ...
- 多线程-Callable、Future、FutureTask
我们普遍知道的创建线程的方式有两种,一种是继承Thread,一种是实现Runnable接口.这两种方式都无法获取任务执行完后的结果,并发包提供了Callable 类能够得到任务执行完的结果. 为何需要 ...
- go项目
1.循环使用缓存 每条日志需要开辟缓存块来存储内容,以减少频繁的内存分配与回收.日志结构体定义如下: type MLogger struct { // freeList is a list of by ...
- c++_work
while((ch=getopt(argc, argv, "X:Y:C:")) != EOF) { switch((char)ch) { case 'X': strcpy(strS ...
- H5 21-属性选择器下
21-属性选择器下 --> <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Python api接口和SQL数据库关联
数据库表创建 服务器环境配置.连接 .操作.数据库 API接口 原则:
- Python学习第十八篇——低耦合函数设计思想
import json 2 def greet_user(filename): 3 try: 4 with open(filename) as f_obj: 5 username = json.loa ...
- Python之列表
一.列表的特点 列表也是一种数据类型 列表元素是有序的,有编号的 列表元素的下标从0开始 列表中的每一个值叫一个元素,编号叫下标(索引/角标): stu_name=['崔海龙','杨帆','lrx', ...
- 解决只能root权限登陆mysql的问题
一.问题描述 在用sqoop连接mysql时,会报错如下图所示,原因是mysql在默认情况下是使用了auth_socket plugin进行认证,即每次登陆都需要sudo mysql -u local ...