神烦之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 ...
随机推荐
- Python脱产8期 Day05 2019/4/17
数据类型的使用 一 数字类型 1.整型:int 2.浮点型:float 3.重点:数字类型直接相互转化 二字符串类型 一 1.定义:在单引号/双引号/三引号中包含一系列字符. 2.注意:可以通过引号的 ...
- 【mongoDB查询进阶】聚合管道(一) -- 初识
https://segmentfault.com/a/1190000010618355 前言:一般查询可以通过find方法,但如果是比较复杂的查询或者数据统计的话,find可能就无能为力了,这时也许你 ...
- Java执行JavaScript脚本破解encodeInp()加密
一:背景 在模拟登录某网站时遇到了用户名和密码被JS进行加密提交的问题,如图: 二:解决方法 1.我们首先需要获得该JS加密函数,一般如下: conwork.js var keyStr = " ...
- 体验usually.js的管道函数——pipe函数
体验usually.js的管道函数——pipe函数 usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发.最新版本2.4.1,最新版本usually. ...
- [书籍]用UWP复习《C#并发编程经典实例》
1. 简介 C#并发编程经典实例 是一本关于使用C#进行并发编程的入门参考书,使用"问题-解决方案-讨论"的模式讲解了以下这些概念: 面向异步编程的async和await 使用TP ...
- SQL 显示表名显示列名
显示表名:show 表名: 显示列(Field)名:show columns from 表名:
- p2394 精度题
题意:输出n/23即可 解法一: 利用高精度的long double直接输出,但由于n的长度不确定,我们要加个限制%12Lf #include <cstdio> int main(){ l ...
- Create a toolwindow for the VBA editor with .NET(C#).
原始出处:http://www.cnblogs.com/Charltsing/p/VBEtoolwindow.html 最近有人问起使用C#在VBE插件中创建toolwindow的事情,由于VBE窗口 ...
- 多线程系列之七:Read-Write Lock模式
一,Read-Write Lock模式 在Read-Write Lock模式中,读取操作和写入操作是分开考虑的.在执行读取操作之前,线程必须获取用于读取的锁.在执行写入操作之前,线程必须获取用于写入的 ...
- vue-lazyload简单使用
vue-lazyload简单使用 npm地址:https://www.npmjs.com/package/vue-lazyload github地址:https://github.com/hilong ...