CSS中,float浮动的理解

原创 2017年04月12日 16:35:51
浮动什么意思呢,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢
<div style="width:100px;">11111</div><div style="width:150px">2222</div>
这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的float为left
<div style="width:100px;float:left;">11111</div><div style="width:150px">2222</div>
再预览,就可以看到,它们到一行上了。
clear是什么意思呢,clear是清除的意思,它有三个值,left,right,both
很好理解,如果设置了clear:left,它就不怕它的左边有float,同理clear:right,clear:both,是左右都不让有float
举个例子,还是上面的
我们设置第二个div的clear:left,也就是不让它左边有float
<div style="width:100px;float:left;">11111</div><div style="width:150px;clear:left;">2222</div>
我们预览一下,就可以看到,尽管第一个div已经float:left了,这两个div仍然在两行上,就是由于第二个div不让它左边有float
因为css的定义是后面的可以覆盖前面的,明白了吧

WEB前端开发学习----5.理解 CSS 浮动float

首先需要明白两个概念:行内元素 , 块元素。

CSS深入理解之float浮动

CSS深入理解之float浮动

CSS 浮动 float 清除浮动 clear 最容易理解的文章

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边...

HTML5高级之css清除float浮动

我们先来回忆一下float的特征:        1)块在一排显示        2)内联支持宽高        3)默认内容撑开宽度        4)脱离文档流        5)提升层级半层 ...

css中float浮动原理及使用方法

先看一下在w3c中对于float的解释 float被归类于CSS 定位属性(Positioning) 描述:规定框是否应该浮动。 定义和用法:float 属性定义元素在哪个方向浮动。以往这个属性...

CSS关于浮动(Float)的前世今生

一 什么是CSS Float? float 是 css 的定位属性。在传统的印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中,应用了CSS的float属性的页面元素就...

解决子元素用css float浮动后父级元素高度自适应高度

解决子y元素用css float浮动后父级元素高度自适应高度正常HTML当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因。...
  • ai_zxc
  • ai_zxc
  • 2016年03月08日 11:38
  • 2852

css样式float造成的浮动“塌陷”问题的解决办法

什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,...

经验分享:CSS浮动(float,clear)通俗讲解

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:              可以看出,即使div1的宽度很小,页面中一行可以容下div1...

一天搞定CSS: 浮动(float)及文档流--10

一天搞定CSS: 浮动(float)及文档流--10
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中,float浮动的理解
举报原因:
原因补充:

(最多只允许输入30个字)