08---HTML+CSS---float浮动

文档流：

文档中可显示对象在排列时所占用的位置。自上而下，自左到右的排列。

特性：

浮动的元素会脱离文档流

好处：

块级元素可以排列在同一行，能节省空间。

浮动之后：

原本被浏览器解析的空格消失了----空格也相当于文本，效果同文字环绕，所以空格在最后面
父元素塌陷----脱离文档流之后，无法撑开父元素
使元素块级化

浮动的值（两个）：

float:left;
float:right;

浮动的最初目的——文字环绕：

（1）不浮动

<head><style>#n1{width:300px;height:300px;border:1px solid orange;}#n1 div{width:80px;height:80px;background-color: pink;}</style>
</head>
<body><div id="n1"><div></div>在九月 潮湿的车厢你看着车窗窗外它 水管在开花椅子在异乡树叶有翅膀上海的街道雪山在边上你靠着车窗我心脏一旁我们去哪你看那 九点钟方向日内瓦湖的房子贵吗世界上 七千个地方我们定居哪知道嘛 今天的消息说一号公路上那座桥断了我们还去吗要不再说呢会修一年吧一年能等吗你还去吗你喜欢吗</div>
</body>

网页显示：

（2）浮动

<head><style>#n1{width:300px;height:300px;border:1px solid orange;}#n1 div{float:left;width:80px;height:80px;background-color: pink;}</style>
</head>
<body><div id="n1"><div></div>在九月 潮湿的车厢你看着车窗窗外它 水管在开花椅子在异乡树叶有翅膀上海的街道雪山在边上你靠着车窗我心脏一旁我们去哪你看那 九点钟方向日内瓦湖的房子贵吗世界上 七千个地方我们定居哪知道嘛 今天的消息说一号公路上那座桥断了我们还去吗要不再说呢会修一年吧一年能等吗你还去吗你喜欢吗</div>
</body>

网页显示：

左浮动：

<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:left;}</style>
</head>
<body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div></div>
</body>

网页显示：

右浮动：

<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:right;}</style>
</head>
<body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div></div>
</body>

网页显示：

补充1：

<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:left;}</style>
</head>
<body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div><div style="width: 50px;height: 90px; background-color: purple;">5</div></div>
</body>

网页显示：

结果解释：

5会被3卡住。

补充2：

<head><style>*{margin:0;padding:0;}#n1{width:200px;height:200px;border:1px solid orange;}#n1 div{float:left;}</style>
</head>
<body><div id="n1"><div style="width: 50px;height: 150px; background-color: pink;">1</div><div style="width: 50px;height: 130px; background-color: pink;">2</div><div style="width: 50px;height: 110px; background-color: pink;">3</div><div style="width: 50px;height: 90px; background-color: pink;">4</div><div style="width: 50px;height: 90px; background-color: purple;">5</div><div style="width: 50px;height: 90px; background-color: purple;">6</div></div>
</body>

网页显示：

结果解释：

6被5的高度卡住。其实和上面同理。

父容器塌陷解决（清除浮动）：

1、父容器也浮动----包裹
2、给父容器加一个溢出隐藏overflow:hidden;----包裹（被隐藏的东西就不会影响外界，起屏蔽作用，变成一个独立的空间，但里面超出去的字会看不到）
3、清除浮动----浮动依然存在，但让浏览器保留原来文档流的排列

上面两种方法看情况，不推荐。以后子元素有浮动，给父元素加clearfix，不让父元素塌掉。

第三种清除浮动的其中两种方法：

一般都会要清除，清除的目的就是为了不让父元素塌掉，不塌就行。

（1）添加一个元素（不需要在页面上展示）：

<head><style>.clearfix:clear:both;<!--clearfix:clear:left;.clearfix:clear:right;-->.</style>
</head>
<body><div class="clearfix"><div>
</body>

（2）伪元素：（通常使用这种方法）

#fu::after{content:"";display:block;clear:both;
}

08---HTML+CSS---float浮动相关推荐

CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
php浮动边框设置属性,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS float浮动布局
CSS float浮动布局 1. 清除浮动 2. 浮动边界 3. 浮动转换 4. 形状浮动控制环绕模式 5. 改变元素的显示区域属性值选项说明 left 向左浮动 right 向右浮动 non ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...
CSS float浮动的深入研究、详解及拓展一一一一一一一一
我们使用float浮动做了很多其本职工作以外的事情,于是我们会混淆,我们会回看不清float真正的面目.浮动真正的意义在哪里呢?要知道这个问题的答案很简单,假设现在CSS中没有浮动(float)属性, ...
CSS Float(浮动详解)
什么是 CSS Float(浮动)? CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 最早是为了让w ...
CSS float浮动的深入研究、详解及拓展(二)
为什么80%的码农都做不了架构师?>>> 接上回- 五.浮动的非本职工作浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示,而其他所有用浮动实现的效果都不是 ...

08---HTML+CSS---float浮动

文档流：

特性：

好处：

浮动之后：

浮动的值（两个）：

浮动的最初目的——文字环绕：

左浮动：

右浮动：

父容器塌陷解决（清除浮动）：

第三种清除浮动的其中两种方法：

08---HTML+CSS---float浮动相关推荐

最新文章

热门文章