css浮动(float)全方位案例解析
前言
浮动最早的使用是出自<img src="#" align="right" />,用于文本环绕图片的排版处理。当然也是一种常用的布局方式。
float 浮动
浮动元素脱离普通流,然后按照指定方向,向左或者向右移动,碰到父级边界或者另外一个浮动元素停止
值: left | right | none | inherit(继承)
初始值: none
应用于: 所有元素
继承性: 无
浮动特性
【浮动流】
正常流中元素一个接一个排列;浮动元素也构成浮动流
效果展示:
默认是display:block 独占一行,当使用float的时候可以看到形成了一个浮动流。
【块级框】
浮动元素自身会生成一个块级框,而不论这个元素本身是什么,使浮动元素周围的外边距不会合并
效果展示:
【包裹性】
浮动元素的包含块是指其最近的块级祖先元素,后代浮动元素不应该超出包含块的上、左、右边界。若不设置包含块的高度,包含块若浮动,则包含块会延伸,进而包含其所有后代浮动元素;若不设置包含块的宽度,包含块若浮动,则包含块宽度由后代浮动元素撑开。
通俗的理解就是:子元素若不设置浮动,父元素如果没有设置高度的话,则是由子元素撑开,如果子元素设置了浮动,父元素的高度则不会由子元素撑开。除非父元素也是浮动或者清除浮动,都可以让父元素包裹住子元素
效果展示:
【破坏性】
浮动元素脱离正常流,并破坏了自身的行框属性,使其包含块元素的高度塌陷,使浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框重新排列
效果展示:
浮动的主要特性就是以上几点,动起手来多点点案例,就会对这个特性更加熟悉。
效果展示:
css浮动(float)全方位案例解析的更多相关文章
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- 验分享:CSS浮动(float,clear)通俗讲解
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- CSS浮动(float,clear)通俗讲解
首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...
- 经验分享:CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享:CSS浮动(float,clear)通俗讲解(转载)
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- 经验分享:CSS浮动(float,clear)通俗讲解 太棒了,清晰明了
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- (转)经验分享:CSS浮动(float,clear)通俗讲解
很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多 ...
- css浮动--float/clear通俗讲解(转载)
本文为转载 (出处:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html) 教程开始: 首先要知道,div是块级元素,在页面 ...
随机推荐
- ABAP 7.53 中的ABAP SQL(原Open SQL)新特性
S/4 HANA 1809 已经在上月发布,随之而来的是ABAP 7.53. 本文是更新文档中ABAP SQL的部分的翻译. 本次更新的内容较多,主要内容包括:Open SQL更名为ABAP SQL: ...
- Kafka集成Kerberos之后如何使用生产者消费者命令
1.生产者1.1.准备jaas.conf并添加到环境变量(使用以下方式的其中一种)1.1.1.使用Kinit方式前提是手动kinit 配置内容为: KafkaClient { com.sun.secu ...
- iowait 过高问题的查找及解决linux
Linux 有许多可用来查找问题的简单工具,也有许多是更高级的 I/O Wait 就是一个需要使用高级的工具来debug的问题,当然也有许多基本工具的高级用法.I/O wait的问题难以定位的原因是因 ...
- Taro文件上传:Blob Url下载Blob对象本身并通过接口上传到服务器
最近项目的文件上传遇到一个问题,就是Taro的chooseImage传给回调的是一个Blob对象,一般来说,上传控件都会导出Data Url,而Taro给了一个Blob Url,问题在于,我直接令im ...
- docker 安装 mongodb
1.docker search mongo 2.docker pull mongo 3.//docker run -d --name mymongo -p 27017:27017 -v /home/h ...
- C. Songs Compression(简单贪心)
水题 #include<iostream> #include<algorithm> using namespace std; #define LL long long ; st ...
- JDB与迭代
要求 1 使用C(n,m)=C(n-1,m-1)+C(n-1,m)公式进行递归编程实现求组合数C(m,n)的功能 2 m,n 要通过命令行传入 3 提交测试运行截图(至少三张:正常如c(3,2).异常 ...
- MicroPython实例之TPYBoard开发板控制OLED显示中文
0x00 前言 之前看到一篇文章是关于TPYBoard v102控制OLED屏显示的,看到之后就想尝试一下使用OLED屏来显示中文.最近利用空余时间搞定了这个实验,特此将实验过程及源码分享出来,方便以 ...
- iview 无法缓存的问题
- 关于gitee代码上传下载
1.在gitee上面创建新分支: 2.复制本地ssh秘钥(C:\Users\Administrator\.ssh) 添加到 gitee设置页面的ssh:(如果之前没有秘钥,就执行ssh-keygen ...