html中的float属性,css float属性 图解float属性的点点滴滴
正确使用CSS的float属性可能会变成一项艰巨的任务,它涉及内容过多,浏览器兼容性问题也很多。它的定位不仅涉及 包含块,还涉及到了行框,块框,还有行内框等内容。本文包含的实施例的应用属性float说明性例子,以及一些失误。
“float”是什么?
CSS中的某些元素是块元素,例如,如果你把两个段落标记为P,那么他们将被放置在两行,。自己各占一行,如何向显示一行的话可以为元素使用inline属性来在页面显示,
另外一种有效改变页面元素的环绕属性是使用float,典型的例子是使用“float”,将图像向左或向右对齐。下面是一个简单的HTML代码的图片和段落:
复制代码代码如下:
Lorem ipsum...
它们显示在一个新行:
让我们给image 增加点CSS代码,让他变变样,嘻嘻:
复制代码代码如下:
img
{
float: right;
margin: 20px;
}
这时,我们得到的是右对齐:
如果有更多的文字,段落会继续环绕周围的图像:如下面的图
例如,我们需要做的图像和文本缩进20像素。如何你这样写代码下面的代码是错误的,不会生效的:
复制代码代码如下:
p
{
margin: 20px;
}
以这种方式,这将是正确的:如下图
复制代码代码如下:
img
{
margin: 20px;
}
那么你要问了为什么上面写的p段落缩进20个像素会不起作用呢,不生效呢?为了找到答案,让我们添加一个框架代码:
复制代码代码如下:
p
{
border: solid 1px black;
}
结果可能会让你大吃一惊:
事实证明,看到没有加上边框之后(这里加不加边框对他们的影响是没有任何作用的,只不过是为了让你明白),图片是在段落内!因此,margin属性不起作用在第一种情况。为了解决这个问题,你可以为段落p使用浮动:float:left,设置一个绝对宽度:设置之后的效果如下图
复制代码代码如下:
img
{
float: right;
margin: 20px;
}
p
{
float: left;
width: 220px;
margin: 20px;
}
奇怪的规则“float”
现在,让我们转向更复杂的方式使用“float”的规则,变换float对象。当创建缩略图时,它可能是必要的。例如:
复制代码代码如下:
默认情况下,每个li条目将各占一行。如果我们将每一个“float:left”,图像将排队一个换行符:
复制代码代码如下:
li
{
float: left;
margin: 4px;
}
但是,如果图像是不同的高度呢?
如果我们向列表中的元素的添加display属性,效果会好一些如下面的图
复制代码代码如下:
li
{
display: inline;
}
现在就让我们来垂直对齐:
复制代码代码如下:
img
{
vertical-align: top;
}
应该记住,如果这是图像更高的情况下,所有其它图像会围绕前一个图像,例如:
另外一个例子是改变顺序的元素,我们有一个列表的项目,
复制代码代码如下:
- li>
- li>
- li>
- li>
- li>
- li>
ul>
如果我们想要它们以相反的顺序排列的,我们只需要使用“float: right:”而非“float: left”,在HTML中,我们并没有改变元素顺序如上面的代码: 我们使用 css来操作
在“float”的帮助下,页面上的项目进行组合是方便的,但我们面临的一个大问题:以下内容(文字或块)也会跟着变化。例如,我们有一组图片:
下面的文字开始流动,周围的整个块:
为了避免这种情况,你必须使用“clear”的属性。如果我们将其应用到第二个图像:
复制代码代码如下:
ul li:nth-child(2)
{
clear: left;
}
以下是我们得到:
在这种情况下,剩余的图像继续继承“float: left”。与此相对应,文字将显示失真:
我们需要对于段落使用clear:both:
复制代码代码如下:
p
{
clear: both;
}
解决我们的问题是:
现在,让我们想象一下,前面的例子我们需要设置背景为画廊的。如果该项目不浮动,那么我们将不得不这样:
复制代码代码如下:
ul
{
background: gray;
}
但是如果我们添加“float: left”从列表中,背景完全消失:
如果我们先设置高度为UL:
复制代码代码如下:
ul
{
height: 300px;
}
它并没有解决问题,因为背景的大小被定义。类“clearfix”,这将被应用到'DIV'的元素在同一水平上的UL,会帮助我们。
复制代码代码如下:
.clearfix
{
clear: both;
}
有另一种解决方案,使用的“overflow”:
复制代码代码如下:
ul
{
overflow: auto;
}
九条规则的float-items:
浮动的项目不能超出它的父容器的边缘。左浮动框的左外边界(margin edge)不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则“如果当前框是左浮动框,并且在源文档中存在更早生成的左浮动框,那么对于任意这些先前的框,要么当前框的左外边出现在先前框的右外边之右,要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶。浮动框的顶边不可以高于源文档中先前元素产生的包含一个框的任何行框的顶。一个浮动块必须位于尽可能高。左浮动框必须尽量靠左放置,右浮动框必须尽量靠右放置。在更高的位置和更靠左或靠右的位置间,选择前者。。左浮动框左边如果有另外一个左浮动框,它的右外边不可以出现在它包含块的右边之右。(或者比较宽松的要求是:一个左浮动不可以超出右边,除非它已经尽可能地靠左排列。)对于向右浮动的元素也有类似的规则。
可见,浮动的规则却是很让人迷惑,但从这几条规则中你也不难发现,浮动的宗旨是,在不溢出包含块的情况下,尽量的靠上靠左/右放置,但是不能高于它前面生成的块框、浮动框和行框的顶。
html中的float属性,css float属性 图解float属性的点点滴滴相关推荐
- 设置字体大小用css的哪个属性,css设置字体大小的属性名是什么
css设置字体大小的属性名是"font-size",该属性使用css中表示尺寸的单位(px.em.rem等)设置字体大小,也可以使用百分号等单位来设置.实际上font-size设置 ...
- html中outline属性,css 轮廓(outline)属性是如何使用的
一.什么是css轮廓(outline)属性 轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用. 举个例子来说吧:在我们平时阅读浏览器里的内容时,当鼠标点击让一个 ...
- Css中设置列表项目符号属性,CSS如何设置列表样式属性,分享
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性 虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
- jQuery$工具属性CSS
jQuery$工具&属性&CSS $工具方法: jQuery属性: CSS: $工具方法: 1.$each(Object,Function):遍历数组.对象.对象数组中的数据 2.$t ...
- 06 【CSS字体属性 CSS文本属性】
8.CSS字体属性 CSS Fonts(字体)属性用于定义:字体系列.大小.粗细.和 文字样式(如:斜体). 8.1字体族 font-family 字体族(字体的格式) CSS 使用 font-fam ...
- CSS学习笔记2字体属性和文本属性
CSS字体属性 CSS Fonts(字体)属性用于定义字体系列.大小.粗细和文字样式 字体系列 CSS使用font-family属性定义文本的字体系列 p { font-family:"微软 ...
- CSS定位布局display/float/position属性之间的关系/区别和如何使用取值行为机制
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动; display: inline-block; 有些时候可以替代float实现相同的效果. positio ...
- CSS 内外边距 float positio属性
一.外边距和内边 margin: 用于控制元素与元素之间的距离 外边距:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的. padding: ...
最新文章
- 李开复对话Yoshua Bengio:AI技术的下一个突破
- OSI参考模型——网络层的主要功能
- Hibernate映射解析——七种映射关系
- 小鹏,该兑现PPT了
- python使用函数的优点-Python函数的特点
- c#值类型和引用类型
- 根据 中序遍历 和 后序遍历构造树(Presentation)(C++)
- u盘读写测试_如何提高u盘读写速度 提高u盘读写速度方法【详细步骤】
- bat产品经理能力模型_产品经理如何构建自己的产品能力模型?
- Sublime Text 3103 Crack 破解 注册码(亲测有效)
- 轩辕剑之天之痕1-5java_轩辕剑游戏 轩辕剑1到5全系列下载
- Vue基础之事件处理器
- Open vSwitch实验常用命令
- USACO-Section1.4 Barn Repair (贪心算法)
- 5-10transformation中部分函数使用
- mysql 树形结构_结合RBAC模型讲解权限管理系统需求及表结构创建
- 如何了解事件中回调函数的参数
- python列表内存分配_python 列表, 元组内存分配优化
- 魔兽争霸平台显示服务器地址错误,发现(魔兽争霸出现错误的解决方法)
- 绘制3d散点图报错ax = fig.gca(projection = ‘3d‘)TypeError: gca() got an unexpected keyword argument
热门文章
- matlab 基础 —— 输出相关信息(pause、fprintf)
- theano —— shared, function(outputs, updates, givens)
- C++基础——格式化输出
- python uwsgi_python nginx+uwsgi+WSGI 处理请求详解
- 在哪里学python-在合肥哪里可以学Python
- python自动化办公都能做什么-用Python自动办公,做职场高手(完结)
- python从入门到放弃表情图-[python从入门到放弃]基于百度OCR的文字识别
- 学了python能干啥举例-1 行Python代码能干哪些事,这 13个你知道吗?
- python刚出来多少薪资-Python薪资待遇到底是多少?老男孩python学习
- python全套完整教程-Python全套教程