css 中 float 和 clear 的作用

相当于原来的 align 的作用,但能力要比 align 强的多。一旦发出float:left或float:right命令,被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding) 、边界( margin )或者另一个块对象的边缘为止。

经典样式:
1、图文环绕:
<div style="width:400px;height:10px;background-color: #66CCFF; border: 1px solid #66CCCC;
float:left;">
</div>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>


2、浮动对象有负边界的情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动对象有负边界的情况[请用标准浏览器查看]</title>
<style type="text/css">
<!--
{}{margin:0px; padding:0px;}
body 
{}{margin:50px; font-size:12px;}
#box 
{}{background-color: #66CCFF;  height: 100px; width: 300px; border: 1px solid #66CCCC; } 
#box2 
{}{background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}
-->
</style>
</head> 
<body>
<div id="box">
  
<div id="box2">margin-top:-15px</div>
右上方小盒子边界是margin:-10px 10px 0px 0px;,folat:right,这个效果还可以吧,这可不是用相对、或者绝对定位做出来的哦,部分文字还是有环绕效果。如果在上面小盒子输标题,在这大盒子内部输内容,这种类型的网页版面效果还可以的,大家可以举一反三,多做出另外类似的效果来。
</div>
</body>
</html> 



3.如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性,子盒子漂浮后不会影响到父盒子的宽度,子盒子超出父盒子的部分会越到父盒子外面,但越出父盒子外的部分不会引起外边文本流的移动,而会直接覆盖在外边文字上面的.

4.如果父盒子不设定高度或者高度为自动,而其子盒子设定了浮动,并且高度超过了父盒子,在标准浏览器中,父盒子高度是不能自适高度,但是这种高度自适应常是我们需要的,如何做到让高度自适应呢,常见的办法是在父级内,浮动子盒子后边加入以下代码:<div style="clear:both"></div>清除掉那个小盒子的浮动。
<div id="box">
    <div id="subBox">高度随着内容变大</div>
    <div id = "removefloat" style="clear:both"></div>
</div>

5.没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。

6.
  并排的同一浮动方向的对像在一行中放不下时,可以自动换行;
  浮动盒子在本文流中出现的位置会影响它的水平浮动位置,就像下面运行框效果,那些盒子并不是紧跟着一起出现的,之间有文本存在,所以结果造成所有等高的盒子并不是同一直线排列出现,而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时,紧接着的同一浮动方向的对象将会被自动换行显示;



------------------ clear ------------------------------------
1.如果你想一段文本流两边可以出现浮动对像的话,你可以用clear:none,看下面效果,蓝色背景段落两边的盒子是浮动的哦。
2.如果你要为一个网页准备一个页脚区块,比如<div id=”footer”></div>,你在设计网页的时候,你想不管你前边怎么浮动排版而又不想这个页脚跟上去,让它一直保持在前边内容后边,而且还是换行独立显示的,那么给这个页脚区块样式加个clear:both吧。
 

转载于:https://www.cnblogs.com/davyjiang/articles/1039317.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/496957.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

csplit 分割文件

csplit 按行分割&#xff0c;split 按大小分割。 csplit命令是split的一个变体&#xff0c;split只能够根据文件大小或行数来分割&#xff0c;但csplit能够根据文件本身特点来分割文件。 csplit命令用于将一个大文件分割成小的碎片&#xff0c;并且将分割后的每个碎片保存成一个…

深度解读:深度学习在IoT大数据和流分析中的应用

来源&#xff1a;网络大数据&#xff08;ID:raincent_com&#xff09;摘要&#xff1a;这篇论文对于使用深度学习来改进IoT领域的数据分析和学习方法进行了详细的综述。在物联网时代&#xff0c;大量的感知器每天都在收集并产生着涉及各个领域的数据。由于商业和生活质量提升方…

Python编程从入门到实践~异常

#异常 try:print(5/0) except ZeroDivisionError:print("You cant divide by zero!")#else 代码块 try:answer print(5/0.99) except ZeroDivisionError:print("You cant divide by zero!") else:print(answer)#处理FileNotFoundError filename alice.tx…

在存储过程中使用系统存储过程sp_Excute的注意事项

在编写自己的存储过程的时候&#xff0c;很多的情况下&#xff0c;会使用到系统的存储过程sp_Excute。但是需要的注意的是&#xff0c;如果你在这个存储过程的参数&#xff08;一般是一段sql语句&#xff09;当中进行了临时table的操作&#xff0c;那么对于调用者来说&#xff…

C++学习之路 | PTA乙级—— 1033 旧键盘打字 (20 分)(精简)

1033 旧键盘打字 (20 分) 旧键盘上坏了几个键&#xff0c;于是在敲一段文字的时候&#xff0c;对应的字符就不会出现。现在给出应该输入的一段文字、以及坏掉的那些键&#xff0c;打出的结果文字会是怎样&#xff1f; 输入格式&#xff1a; 输入在 2 行中分别给出坏掉的那些键…

区块链行业报告|从交易流程到Token经济的全方位解析

来源&#xff1a;36氪研究院作者&#xff1a;孔德云 36氪研究院 分析师中国人在干嘛&#xff1f;首先&#xff0c;目前我国区块链项目只占到了全球的4.6%&#xff0c;相比之下&#xff0c;美国占了36%。由于大环境因素&#xff0c;通过ICO的形式&#xff0c;真正找到落地场景…

Python编程从入门到实践~JSON

import json #AttributeError: module ‘json’ has no attribute ‘dump’ #模块的名字被我命名成了json.py&#xff0c;名称冲突#使用json.dump()和json.load() numbers [2, 3, 4, 5, 66, 12] filename ./data/number.json with open(filename,w) as file:json.dump(numbe…

什么是社会性网络?什么是六度分隔理论?

2007年05月23日 星期三 下午 03:13根据维基百科的解释&#xff0c;“社会网络&#xff08;Social Networking&#xff1a;SN&#xff09;”是指个人之间的关系网络。 据一些不系统的分析&#xff0c;社会网络&#xff08;或称为社会性网络&#xff09;的理论基础源于六度分隔理…

ps 命令详解

From&#xff1a;http://blog.chinaunix.net/uid-25681671-id-3201927.html 进程和作业管理命令&#xff1a;http://man.linuxde.net/sub/进程和作业管理 Linux 关于 进程/线程 的命令 kill 和 pgrep 和 pidof 和 awk 和 pkill 和 killall&#xff1a;https://blog.csdn.net…

C++学习之路 | PTA乙级—— 1035 插入与归并 (25 分)(精简)

1035 插入与归并 (25 分) 根据维基百科的定义&#xff1a; 插入排序是迭代算法&#xff0c;逐一获得输入数据&#xff0c;逐步产生有序的输出序列。每步迭代中&#xff0c;算法从输入序列中取出一元素&#xff0c;将之插入有序序列中正确的位置。如此迭代直到全部元素有序。 归…

中国将对人工智能、云计算等行业独角兽IPO即报即审

来源&#xff1a;21世纪经济报道摘要&#xff1a;2月28日下午&#xff0c;有媒体报道称监管层对券商作出指导&#xff0c;包括生物科技、云计算在内的四个行业若有“独角兽”&#xff0c;立即向发行部报告&#xff0c;符合相关规定者可以实行“即报即审”。2月28日下午&#xf…

Gridview利用DataFormatString属性设置数据格式

from: http://blog.sina.com.cn/s/print_4a5e327701000b56.html 首先把Gridview的AutoGenerateColumns属性设为False&#xff08;默认是False&#xff09;&#xff0c;DataField选择相应的字段&#xff0c;特别需要注意的是要把需要设置的字段的HtmlEncode属性设置为False&…

Python 包管理工具 pip 安装 和 使用

pip 安装使用详解&#xff1a;http://www.ttlsa.com/python/how-to-install-and-use-pip-ttlsa python 包&#xff1a;https://pypi.python.org/pypi 在 python 中安装非自带 python 模块&#xff0c;有三种方式&#xff1a; 1. easy_install2. pip3. 下载压缩包(.zip, .tar, …

如何阅读一本书~主题阅读

一、观察研究范围&#xff1a;主题阅读的准备阶段 &#xff08;1&#xff09;、针对你要研究的主题&#xff0c;设计一份试验性的书目 可以参考图书馆目录、专家的建议与书中的书目索引。 &#xff08;2&#xff09;、浏览这份书目上所有的书&#xff0c;确定哪些与你的主题相…

5G的风头盖过了AI,英特尔展示未来四大应用场景 | MWC2018

来源&#xff1a;36Kr摘要&#xff1a;英特尔公司网络平台事业部副总裁Alex Quach在接受采访时表示&#xff0c;5G已经从实验室带到了实时现场。事实上&#xff0c;在MWC2018现场&#xff0c;英特尔则直接展示了5G网络未来可以落地的场景。5G去哪儿&#xff1f;去年MWC现场&…

C++学习之路 | PTA乙级—— 1036 跟奥巴马一起编程 (15 分)(精简)

1036 跟奥巴马一起编程 (15 分) 美国总统奥巴马不仅呼吁所有人都学习编程&#xff0c;甚至以身作则编写代码&#xff0c;成为美国历史上首位编写计算机代码的总统。2014 年底&#xff0c;为庆祝“计算机科学教育周”正式启动&#xff0c;奥巴马编写了很简单的计算机代码&#x…

SQL Server的游标

SQL中的游标&#xff0c;可以用在过程或者作业中。 Declareeventidvarchar(50) Declarecur_name cursorforselect--Selectxxxxxxxx --定义游标 opencur_name --打开游标 fetchnextfromcur_name intoeventid--将name字段存到name变量中 whilefetch_status0--执行成功 begin--其他…

腾讯首席战略官詹姆斯: 从互联网信息的永久性和稀缺性看腾讯的投资逻辑

腾讯首席战略官詹姆斯•米切尔&#xff08;James Mitchell&#xff09;来源&#xff1a;腾讯大学摘要&#xff1a;据不完全统计&#xff0c;2017年腾讯在全球投资了超过100家公司。每一年&#xff0c;腾讯生态圈的CEO们都会聚在一起分享最前沿的行业思考。据不完全统计&#xf…

Python中的random模块

来源&#xff1a;http://www.cnblogs.com/yd1227/archive/2011/03/18/1988015.html Python中的random模块用于生成随机数。下面介绍一下random模块中最常用的几个函数。 random.random random.random()用于生成一个0到1的随机符点数: 0 < n < 1.0 random.uniform random.…

一个完美网站的101项指标.第一部分.概述

前言  世 界上最有趣的职业是网站设计师&#xff0c;有人为自己的作品喊价5000美金&#xff0c;有人129美金就行&#xff0c;而很多人根本看不出这两者的差别&#xff0c;我见过一个加拿大 Freelancer 设计师&#xff0c;他的网站上有个报价系统&#xff0c;你可以选择自己的…