CSS浮动设置与清除
float:设置浮动
浮动会使元素脱离普通文档流,使元素向左或向右移动,其周围的元素也会重新排布,在布局中非常有用。
html:
<p>以下是图片的浮动设置:</p>
<img src="data:image/follow-1.png">
<p>图片后文字:注意<p>是块级元素,元素前后有换行符。</p>
不设置浮动时浏览器显示如下:
设置左浮动float:left;后浏览器显示如下:
设置右浮动float:right;后浏览器显示如下:
clear:清除浮动
当有的元素不需要浮动时,但该元素周围有浮动的元素时,可是设置clear属性
clear:left;消除左浮动 clear:right;消除右浮动 clear:both;消除两边浮动
html:
<p>第一组图片:</p>
<img src="data:image/follow-1.png">
<img src="data:image/follow-2.png">
<p>第二组图片:</p>
<img src="data:image/follow-3.png">
<img src="data:image/follow-4.png">
<img src="data:image/follow-5.png">
CSS:
img
{
float:left;
}
浏览器显示如下:
这样显得非常不美观,这时可以设置clear:both;
CSS:
img
{
float:left;
}
p
{
clear:both;
}
浏览器显示如下:
这样显得更加美观好看,也由此可以看出浮动在布局中起到的作用。
CSS浮动设置与清除的更多相关文章
- css浮动现象及清除浮动的方法
css浮动现象及清除浮动的方法 首先先明确浮动最初的定义及使用场景:实现文本环绕图片的效果. 除了用浮动外,目前暂无其他方法实现文本环绕 再来看看浮动的具体定义: 浮动的框可以左右移动,直至它 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- CSS——浮动及应用&清除浮动
浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 , 字面翻译 普通流 或者标准流都可以. 前面我们说过,网页布局的核心,就是用CSS来摆放盒子位置.如何把盒子摆 ...
- CSS 浮动副作用 ,清除浮动
参考:http://www.divcss5.com/jiqiao/j406.shtml 副作用:一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,背景色不显示(如果父级不设 ...
- css 浮动布局,清除浮动
浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...
- css浮动产生和清除浮动的几种方式
浮动的语法:float:left/right; 浮动float的原本设计了作用初衷是为了实现文字环绕效果 浮动产生负作用: 1.背景不能显示 2.边框不能撑开父元素 3.margin padding设 ...
- 彻底理解浮动float CSS浮动详解 清除浮动的方法
我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流. 注意:标准流使我们网页布局中最稳定的一种结构 ...
- css浮动(folat),清除浮动(clear)(另加两种清除浮动方式,总共三种清除浮动方式)
css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...
- css 浮动和清除浮动
在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...
随机推荐
- Sublime Text 2 中文乱码
欲解决乱码问题,关键在于让Sublime Text 2支持GB2312和GBK.步骤如下:1.安装Sublime Package Control.在Sublime Text 2上用Ctrl+-打开控制 ...
- php设计模式 工厂模式和单例
1.单例模式//让该类在外界无法造对象//让外界可以造一个对象,做一个静态方法返回对象//在类里面通过让静态变量控制返回对象只能是一个. class cat{ public $name; privat ...
- selenium webdriver——JavaScript警告窗处理
在WebDriver中处理JavaScript所生成的alert.confirm以及prompt,具体方法是使用switch_to_alert()方法定位到alert.confirm以及 prompt ...
- NIO--1
1.为什么不直接用jdk NIO(1) API繁杂(2) 原始NIO可靠性不是很高.可靠性包括:断开重连,网络闪断,半包读写,失败缓存(3) NIO 的epoll BUG会导致多路复用器Selecto ...
- C++ Programming with TDD之一:GMOCK框架简介
所谓测试驱动开发,英文全称Test-Driven Development,简称TDD,是一种不同于传统软件开发流程的新型的开发方法.就是在明确要开发某个功能后,首先思考如何对这个功能进行测试,并完成测 ...
- 动态规划DP的斜率优化 个人浅解 附HDU 3669 Cross the Wall
首先要感谢叉姐的指导Orz 这一类问题的DP方程都有如下形式 dp[i] = w(i) + max/min(a(i)*b(j) + c(j)) ( 0 <= j < i ) 其中,b, c ...
- android Toolbox和BusyBox
在安卓系统中,Toolbox是能够实现内存的管理,备份管理和清除数据等功能的系统文件.用来对手机性能进行设置,需要root权限.能够被软件调用. 我们在updater-script文件中,知道有类似s ...
- RHEL退出RHN
清除原有数据 rm -rf /etc/sysconfig/rhn/rhn_systemidrm -rf /var/cache/yum/*yum clean all 加载刷新源 yum repolist ...
- 理解javascript的闭包,原型,和匿名函数及IIFE
理解javascript的闭包,原型,和匿名函数(自己总结) 一 .>关于闭包 理解闭包 需要的知识1.变量的作用域 例1: var n =99; //建立函数外的全局变量 function r ...
- [fjwc2015]Screen [从hzw神犇那里扒来的题]
[题目描述] 码农有一块超新星屏幕,它有N个像素点,每个像素点有亮度和灰度两个参数,记为I和H, 范围都是0~32000. 一天,码农突发奇想,想知道哪个点比较容易亮瞎眼睛.为此,他定义了一个瞎眼指数 ...