CSS浮动属性Float详解

合集下载

关于float的描述

关于float的描述一、什么是floatfloat是CSS中用来控制元素在页面中浮动的属性。

它可以让元素脱离文档流，使其能够在页面上自由移动，同时也可以和其他元素进行交互。

二、float的属性值float属性有三个可能的取值：left、right和none。

其中，left表示元素向左浮动，right表示元素向右浮动，none表示元素不浮动。

三、float的作用1.实现文字环绕图片效果通过将图片设置为浮动，可以让文字环绕在图片周围。

这样可以有效地利用页面空间，并且使得页面布局更加美观。

2.实现多列布局通过将多个块级元素设置为浮动，并且设置宽度和间距，可以实现多列布局。

这种方式比使用表格进行布局更加灵活，并且兼容性更好。

3.实现响应式设计通过将某些元素设置为浮动，并且使用媒体查询进行适配，可以实现响应式设计。

这样可以让网站在不同设备上显示效果更加优秀。

四、float的特性1.脱离文档流当一个元素被设置为浮动时，它会脱离文档流，并且不再占据原来的位置。

这意味着其他元素会填补它留下的空白区域。

2.高度塌陷当一个元素被设置为浮动时，它的父级元素的高度会塌陷。

这是因为浮动元素不再占据父级元素的空间，所以父级元素的高度会变成0。

3.清除浮动为了避免浮动元素造成的高度塌陷问题，可以使用清除浮动的技术。

常用的清除浮动方式有：添加空div、使用伪类、使用overflow属性等。

五、float的注意事项1.避免滥用虽然float可以实现很多布局效果，但是滥用float会导致代码混乱，并且增加维护难度。

在使用float时需要慎重考虑。

2.避免重叠当多个元素都被设置为浮动时，可能会出现重叠的情况。

为了避免这种情况，可以使用clear属性来清除浮动。

3.注意IE6下的bug在IE6下，如果一个浮动元素没有明确指定宽度，那么它就会变成100%宽度。

在IE6下需要特别注意这个问题，并且给所有需要浮动的元素都指定一个明确的宽度。

CSS3浮动与定位

✎ 6.3 知识点讲解
1、元素的类型
（2）行内元素行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、 <u>、<a>、<span>等，其中<span>标记是最典型的行内元素。
✎ 6.3 知识点讲解
1、元素的类型
（1）块元素块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div>标记是最典型的块元素。
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
✎
✎ 6.4 知识点讲解
3、相对定位relative
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

react style 语法 float left

React Style 语法：float left1. 介绍在React中，我们可以使用CSS的float属性来控制元素的浮动位置。

float属性可以使元素脱离正常的文档流，并且可以让其他元素环绕它。

通过将元素设置为float: left，我们可以使元素向左浮动，并让其右侧的元素环绕它。

在本文中，我们将详细介绍React中如何使用float: left来实现布局效果，并提供一些实际的示例和最佳实践。

2. 如何在React中使用float left在React中使用float: left非常简单。

我们可以通过在元素的style属性中设置float: left来实现。

下面是一个示例：import React from 'react';const MyComponent = () => {return (<div><div style={{ float: 'left', width: '50%' }}>Left Content</div><div style={{ float: 'left', width: '50%' }}>Right Content</div></div>);};export default MyComponent;在上面的示例中，我们创建了一个包含两个子元素的父元素。

通过将子元素的float属性设置为left，我们使它们向左浮动，并且它们会并排显示在父元素中。

请注意，我们还为子元素设置了width属性，以确保它们占据父元素的一半宽度。

这是因为浮动元素的宽度默认为其内容的宽度，如果不设置宽度，子元素将会堆叠在一起。

3. 注意事项和最佳实践在使用float: left时，有几个注意事项和最佳实践需要记住：3.1 清除浮动当使用浮动布局时，可能会遇到父元素高度塌陷的问题。

CSS框模型、定位、浮动、显示和隐藏

CSS框模型（盒模型）、定位、浮动、显示和隐藏◆目标理解块元素和行内元素理解框模型掌握框模型的样式属性掌握定位属性掌握浮动属性掌握显示和隐藏属性◆内容1 块元素和行内元素块元素和行内元素的转换HTML常见的块元素和行内元素2框模型网页中的框框的特点框的样式属性3 定位4 浮动5 清除浮动6 显示和隐藏1 块元素和行内元素网页中的元素分为块元素和行内元素。

块元素成块状显示，独占行；行内元素不占满行，多个行内元素可在一行上显示。

块元素内能容纳其他的块元素和行内元素，行内元素内只能容纳行内元素。

◆块元素和行内元素的转换使用display（显示）属性，当设置标签的display属性值为block时，标签就呈块元素显示，当设置标签的display属性值为inline时，标签就呈行内元素显示。

一个网页就是大型的方框，里面包含着一大堆小方框。

◆网页中的框：块元素都是框（行内元素不是框，行内元素的高，宽都不能改变）。

框具有外边距、边框、、内边距和内容内容（content）：包含文字、图片、flash动画、应用程序、视频等内边距（padding）：内容和边框之间的距离边框（border）：盒的边界外边距（margin）：2个盒之间的空白，透明我们可以看到框模型的4个面：顶部（top）、右侧（right）、底部（bottom）和左侧（left）◆框的特点(1) 外边距和内边距只有宽度属性(2) 边框有大小和颜色之分，可以对每一条边框设置不同的样式(3) width和height定义的是内容的宽度和高度，而不是整个框的宽度和高度◆框的样式属性1内容的属性：widthheight2padding属性padding属性设置对象四边的内边距如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。

（顺时针）如果只提供一个，将用于全部的四条边。

如果提供两个，第一个用于上－下，第二个用于左－右。

如果提供三个，第一个用于上，第二个用于左－右，第三个用于下不允许负值设置对象四边的外边距检索或设置对象四边的外延边距。

DIV+CSS应用float和clear属性论文

DIV+CSS应用中的float和clear属性浅谈摘要：clear是与float相对的一个属性，clear属性规定元素的哪一侧不允许其他浮动元素。

clear共有4个值，分别是left，right，both，none，分别表示不允许元素左边，右边，两边有浮动的元素和允许元素两边都有浮动的元素。

关键词：浮动；网页布局；div+css；clear中图分类号：tp393.092 文献标识码：a文章编号：1007-9599(2011)24-0000-01float and clear properties study in div + css application huang chaoli shi zhangjun(military school of economics,education and technology center,wuhan430035,china)abstract:clear float relative with a property,clear attribute specifies which side of the element other floating elements are not allowed,clear a total of fourvalues,namely,left,right,both, none,respectively,does not allow element left,right,on both sides of the floating elements and allows floating elements on both sides of the element.keywords:floating;page layout;div + css;cleardiv+css是一种网页的布局方法，这一种网页布局方法有别于传统的html网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。

css中float的用法

css中float的用法CSS中float是一种常用的样式属性，可以帮助我们实现网页中元素的排列和布局。

接下来，我们一步步探讨一下它的用法。

1. 基本概念float是CSS中的一个属性值，表示元素浮动，可以是左浮动或右浮动，常用取值为left或right。

当元素浮动后，它会脱离文档流，并且周围的元素会自动排列到它的旁边。

同时，浮动元素会自动适应周围元素的宽度，如果周围元素宽度不够，那么浮动元素会自动换行。

2. 实现元素的布局通过设置元素的float属性，我们可以很容易地实现元素的布局。

例如，我们想要实现两个元素并排显示，可以按照以下步骤操作：（1）在CSS中定义两个元素的样式，例如：div.left {float: left;width: 50%;}div.right {float: right;width: 50%;}这里定义了两个div元素，一个左浮动，一个右浮动，宽度都是50%。

（2）在HTML中添加两个元素，并设置它们的样式类：<div class="left">左边的元素</div><div class="right">右边的元素</div>这里我们用了div标签来表示两个元素，并分别设置了left和right样式类。

（3）最后，我们只需要在浏览器中打开HTML文件，就可以看到两个元素已经按照我们想要的方式排列出来了。

3. 清除浮动当我们使用float属性时，有时候会遇到一些问题，例如周围的元素不能正确地显示在浮动元素的旁边，或者页面布局出现了问题。

这时，我们需要使用清除浮动的方法来解决。

清除浮动的方法有很多种，其中比较常用的是在浮动元素的容器中添加一个空元素，并设置clear属性，例如：<div style="clear:both;"></div>这里我们在浮动元素的容器中添加了一个空元素，并设置了clear:both样式，表示清除浮动效果。

float的用法

float的⽤法float的⽤法（脱离⽂档流）leftright解决脱离⽂档流的办法有四种1.float（会脱离页⾯流）-left-right-清除浮动元素1：在浮动元素下⽅写 <div style="clear:both"></div>-清除浮动元素2最优的⽅法，推荐CSS代码部分：.parent:after{content:'';display:'block';clear:both;}-清除浮动元素3为⽗元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏.parent{//...overflow:hidden ; //某个固定值}-清除浮动元素4为⽗元素设置固定⾼度 -------------缺点：不知道具体⾼度没办法设置CSS代码部分：.parent{//...height:xxx; //某个固定值}-->float1.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>有⽗节点</title><style>*{padding: 0;margin: 0;}.son1{height: 80px;width: 80px;background-color: coral;float: left;}.parent:after{content: '';display: block;clear: both;}</style></head><body><div class="parent"><div class="son1">这是⼦元素1</div></div><p>这是⼀个浮动的元素，他现在不浮动了</p></body></html>float2<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>没有⽗节点</title><style>*{padding: 0;margin: 0;}.son1{height: 80px;width: 80px;background-color: coral;float: left;}</style></head><body><div class="son1">这是⼦元素1</div><div style="clear:both;"></div><p>这是⼀个浮动的元素，他现在不浮动了</p> </body></html>。

css浮动float属性详解

css浮动float属性详解⼀、什么是浮动？浮动，顾名思义，就是漂浮的意思。

指的是⼀个元素脱离⽂档流，悬浮在⽗元素之上的现象。

⼆、如何产⽣浮动？给元素本⾝添加float属性float值：left元素向左浮动。

right元素向右浮动。

none默认值。

元素不浮动，并会显⽰在其在⽂本中出现的位置。

inherit规定应该从⽗元素继承 float 属性的值。

三、浮动有什么作⽤？作⽤：在html⽂档流中，分为⾏元素、块元素和⾏内块元素，⾏元素和⾏内块元素都是以横向排列的，⽽块元素则是以流的形式从上往下排列的，当我们想使块元素横向排列时，就⽤到了我们的浮动(float)。

当给⼀个块级元素添加浮动时本来应该竖向排列的元素开始横向排列的，如下图所⽰：.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}.box1 {float: left; width: 100px; height: 100px; background: #000;}.box2 {float: left; width: 100px; height: 100px; background: red; }.box3 {width: 200px; float: left; height: 200px; background: yellow; }.box4 {width: 300px; float: left; height: 300px; background: blue; }.box5 {float: left; width: 300px; height: 400px; background: green;}<div class="box"> <div class="box1"> box1 </div> <div class="box2"> box2 </div> <div class="box3"> box3 </div> <div class="box4"> box4 </div> <div class="box5"> box5 </div> </div>四、浮动带来的问题当给了⼀个元素浮动时元素脱离⽂档流，会产⽣⼀个致命问题：⽗元素⾼度塌陷(以上⾯的为例⼦):.box {border: 1px solid #666; width: 800px;color: #fff;}.box1 {float: left; width: 100px; height: 100px; background: #000;}.box2 {float: left; width: 100px; height: 100px; background: red; }.box3 {width: 200px; float: left; height: 200px; background: yellow; }.box4 {width: 300px; float: left; height: 300px; background: blue; }.box5 {float: left; width: 300px; height: 400px; background: green;}.on { width: 50px; height: 300px; background: pink; }<div class="box"><div class="box1"> box1 </div><div class="box2"> box2 </div><div class="box3"> box3 </div><div class="box4"> box4 </div><div class="box5"> box5 </div></div><div class="on"> </div>当我不给⽗级元素box添加⾼度时box⾼度为0，并且box的兄弟元素会往上挤；⽽浮动元素将会把⽗级兄弟元素on覆盖：五、如何解决(优缺点)？(1)⽗级div定义 height<style type="text/css">/*解决代码*/.div1{background:#000080;border:1px solid red; height:200px;}.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}</style><div class="div1"><div class="left">Left</div><div class="right">Right</div></div><div class="div2">div2</div>原理：⽗级div⼿动定义height，就解决了⽗级div⽆法⾃动获取到⾼度的问题。

css中清除浮动的方法

css中清除浮动的方法在网页开发中，清除浮动是一个非常重要的任务。

浮动元素可以让页面布局更加灵活，但是如果浮动没有被正确清除，会导致很多排版问题。

本文将介绍几种清除浮动的方法，并提供一些实用的技巧。

以下是需要掌握的内容：1. 什么是浮动2. 浮动元素对页面排版的影响3. 清除浮动的方法4. 清除浮动的技巧一、什么是浮动？在网页中，浮动（float）指的是一个元素沿着其容器的左侧或右侧移动，直到碰到边缘或碰到另外一个浮动元素为止。

通过浮动，我们可以实现网页中图片环绕文字等效果。

二、浮动元素对页面排版的影响浮动元素对页面排版有着深远的影响，它可以让元素脱离文档流，从而引起以下问题：1. 父元素高度塌陷当一个元素浮动之后，它将从父元素的文档流中脱离出来。

这样就会导致父元素的高度无法通过子元素自动撑开。

如果不清除浮动，就会导致父元素的高度塌陷。

2. 相邻元素重叠浮动元素在页面中移动时，有可能会出现和其他元素重叠的情况。

这种情况在多列布局中尤其常见。

三、清除浮动的方法为了解决浮动带来的问题，我们需要清除浮动。

下面是几种常见的清除浮动方法：1. clear属性clear属性是最简单、最直接的清除浮动方法。

通过设定清除属性，可以使下一个元素脱离当前浮动元素的影响，从而使页面布局更加稳定。

清除浮动的代码如下：```css.clearfix::after{content:"";clear:both;display:block;height:0;visibility:hidden;}```2. 父元素添加overflow属性在父元素中添加overflow属性也可以清除浮动。

因为父元素中的浮动子元素会影响其高度的计算，因此添加overflow属性可以强制父元素重新计算自身高度。

清除浮动的代码如下：```cssoverflow: auto;}```3. 使用BFCBFC（块级格式化上下文）可以解决浮动带来的很多问题。

HTML5+CSS3 Web前端设计基础教程第3版(第5章)

relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
1．方法一：额外增加应用“clear: both;”规则的空容器在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: ”规则清除浮动向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义

解决CSS中float right后右对齐换行问题

解决CSS中float:right后右对齐换行问题CSS中浮动元素float的用法你是否了解，这里和大家分享一下float:right属性后右对齐换行问题解决方法，希望对你的学习有所帮助。

CSS中float时浮动元素，浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧，这里和大家分享一下解决CSS中float:right属性后右对齐换行问题方法。

解决CSS中float:right属性后右对齐换行问题◆问题在Chrome、Firefox下这个问题没有出现，但是在IE下就会出现，日期另起一行了。

◆原因分析当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float 的元素将被排斥也就是说，你的span是float:right，但是你文本还是float:none。

如果要让两者在同一行的话，有两种方法。

把span先于文本显示，即：关于浮动的一些知识"浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。

文字内容会围绕在浮动元素周围。

当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

""元素浮动后将自动转为块级元素。

该元素可以被移动至当前行的左侧或右侧。

属性如下：float:left,float:rightorfloat:none"。

"你应该为所有的浮动元素设定宽度属性（除非是＜img＞元素，因其具有隐含的宽度）。

如果不设定宽度，结果将是不可预知的。

""举例来说，浮动元素应该定义宽度属性，不论是显式指定的还是隐含的。

另外，它会尽可能的水平的填充容器元素，就像非浮动内容那样，不给其他内容空间以围绕它们。

其次，和正常文档流中的元素不同，浮动元素的垂直边距(margin)不会叠加。

最后，浮动元素可以和临近在正常文档流中块级元素重叠（译注：浮动元素不占任何正常文档流空间，所以建议不要理解成重叠，而是腾空浮动的概念。

CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

CSS布局之脱离⽂档流详解——浮动、绝对定位脱离⽂档流的区别准确的说，float浮动属于半脱离⽂档流，1、float浮动跟position:absolute⼀样拥有脱离⽂档流的功能，但是float虽然脱离了⽂档流但是仍然会占据位置，其他的⽂本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动，你会看到这⼏个div并不会重叠，⽽是会顺序排列。

可以参考设置display:none,跟visible:hidden的效果。

其他盒⼦看不见被float的元素，但是其他盒⼦⾥的⽂本看得见float浮动：1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>浮动float和absolute区别</title>6<style>7 .box{8 width: 500px;9 height: 300px;10 border: 1px solid black;11 margin: 0 auto;12 position: relative;13 }14 .first {15 width: 150px;16 height: 100px;17/*float: left;*/18 display: inline-block;19 background: pink;20 border: 10px solid red; /*增加了边框*/21 }22 .second {23 width: 100px;24 height: 100px;25 background: blue;26 display: inline-block;27 float: left; /*只设置⼀个浮动*/28 }29 .third{30 width: 50px;31 height: 100px;32/*float: left;*/33 display: inline-block;34 background: green;35 }36</style>37</head>3839<body>40<div class="box">41<div class="first">123</div>42<div class="second">456</div>43<div class="third">789</div>44</div>45</body>46</html>效果图：将第27⾏设置改成position:absolute;如下图将第27⾏设置改成position:absolute;加上left:0；如下图例⼦3.脱离⽂档流对⽐1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>浮动float和absolute区别</title>6<style>7 .box{8 width: 500px;9 height: 300px;10 border: 1px solid black;11 margin: 0 auto;12 position: relative;13 }14 .first {15 width: 150px;16 height: 100px;17/*float: left;*/18 display: inline-block;19 background: pink;20 border: 10px solid red; /*增加了边框*/21 }22 .second {23 width: 100px;24 height: 100px;25 background: blue;26 display: inline-block;27 position: absolute;28 left:0;29 opacity: 0.830/*float: left;*/3132 }33 .third{34 width: 50px;35 height: 110px;36 float: left;37 display: inline-block;38 background: green;39/*position: absolute;*/40 }41</style>42</head>4344<body>45<div class="box">46<div class="first">123</div>47<div class="second">456</div>48<div class="third">789</div>49</div>50</body>51</html>absolute是脱离⽂档流优先级更⾼浮动解析<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.box{width:500px;height:500px;border: 5px solid green;} .first {width: 200px;height: 200px;border: 3px solid red;float:left; /*左浮动*/}.second {width: 150px;height: 100px;border: 3px solid blue;}.third{width: 110px;height: 100px;border: 3px solid grey;float:left; /*左浮动*/}</style></head><body><div class="box"><div class="first">123</div><div class="second">456</div><div class="third">789</div></div><div>我是⽂字</div></body>效果图：图中第⼀个元素红⾊边框——左浮动第⼆个元素蓝⾊边框第三个元素灰⾊边框——左浮动注：浮动的意思就是脱离⽂档流，什么是浮动脱离⽂档流呢？顾名思义，浮动就是相当于把元素漂浮在没有设置浮动元素的上⽅（就好⽐如没浮动的代表⼤地，浮动则相当于⽩云⼀样漂浮在天空，⽽⾃⼰则是在⽐⽩云更⾼的⾼度俯瞰⼤地，你俯视哦那块地被⽩云遮住了，你只能看到⽩云却看不到⼤地，这就是浮动），从图中就可以看出蓝⾊边框被红⾊边框覆盖掉，怪异的是没浮动的⽂字内容跑到了浮动之外，通过这些你⼤概也清楚了吧，float跟absolute都是脱离⽂档流的区别。

解决浮动塌陷的四种方法

解决浮动塌陷的四种方法浮动塌陷是网页设计和布局中常见的问题之一。

当元素浮动时，其父级元素的高度可能会塌陷，导致布局出现不符合预期的结果。

为了解决这个问题，有四种常用的方法，分别是增加清除浮动、使用clearfix、使用overflow属性和使用flex布局。

下面将一步一步地介绍并详细说明这四种方法。

第一种方法是增加清除浮动。

在父级元素的末尾，使用clear属性清除浮动。

可以在CSS中添加一个clearfix类，并将其应用于父级元素，其中包含clear:both属性，这样就可以确保父级元素的高度能够正常显示。

第二种方法是使用clearfix。

clearfix是一种利用伪元素来清除浮动的技术。

可以在CSS中定义一个clearfix类，并将其应用于父级元素。

具体代码如下：.clearfix::after {content: "";display: table;clear: both;}这段代码会在父级元素的末尾添加一个伪元素，并设置clear:both属性，以确保清除浮动。

第三种方法是使用overflow属性。

可以将父级元素的overflow属性设置为auto或hidden来防止浮动塌陷。

具体代码如下：.parent {overflow: auto;}这样设置之后，父级元素会自动计算子元素的高度，从而避免了浮动塌陷问题。

第四种方法是使用flex布局。

flex布局是一种现代的CSS布局方式，可以非常方便地解决浮动塌陷问题。

可以将父级元素的display属性设置为flex，并指定flex-direction为row或column，具体代码如下：.parent {display: flex;flex-direction: row; 或者column}这样设置之后，父级元素会自动根据子元素的高度来调整自身的高度，从而解决了浮动塌陷问题。

综上所述，我们介绍了解决浮动塌陷问题的四种常用方法，包括增加清除浮动、使用clearfix、使用overflow属性和使用flex布局。

float css用法

float css用法
CSS中的float属性用于指定一个元素的浮动方式，即元素相
对于其容器的浮动位置。

float属性有以下几种用法：
1. float: left;：指定元素向左浮动，将元素放到容器的左侧，其他内容将围绕在其右侧。

2. float: right;：指定元素向右浮动，将元素放到容器的右侧，
其他内容将围绕在其左侧。

3. float: none;（默认值）：不浮动元素，元素将按照文档流的
顺序排列，不会影响其他元素的位置。

4. float: inherit;：继承父元素的浮动方式。

浮动元素会脱离普通文档流，浮动后的元素不再占据原有位置，如果浮动的元素与其他元素重叠，则会根据元素的顺序进行覆盖。

浮动元素可能会造成容器塌陷，即容器的高度塌陷为0。

这时
可以通过清除浮动来解决，可以使用clear属性来清除前面的
浮动。

例如，设置clear: both; 可以清除前面的左浮动和右浮动。

float属性

float属性归功于互联网时代的发展，和电脑等移动高科技设备的普及，大家的生活也在不断的发生着变化，“足不出户看世界”已不再是虚幻，“蜗居”也不再是贬义而是一种新的生活方式。

网络商城，刷剧交友，一个个现实生活中的场景都以各种各样的网页呈现在大家眼前，带领大家遨游在互联网的世界中，从而如何能够呈现各种各样丰富多彩的页面，也就是前端技术的重要性就不言而喻了。

#float的文字环绕float这个单词从字面上理解是“浮动”的意思，我们也可以理解成“漂浮”的意思，也就是使其作用的元素“漂浮”起来，然后再“压”入之后的布局之中。

float最经常的用途是“文字环绕”效果，就是让图片被文字包裹，我们先来看一段代码。

从上面的代码中我们可以看出，一个img元素后面跟着用p元素包含的一段文字，并且img元素被赋予了float:left属性。

浏览器在解析这段html构成的时候先解析到了img，但因为img有浮动属性（即float:left），所以img就“漂浮”了起来，脱离了正常的文本流，对于脱离正常文本流的动作我们这样理解，img有了“超能力”,它独立成为一层悬浮出来，临时的在页面的上面一层。

然后浏览器继续解析到了之后的文字，因为文字部分没有浮动属性加持，所以它还是要规规矩矩的按照正常的文本流规则显示，加之文字之前的img元素已经悬浮了起来，所以文字会向“上”移动，“顶替”了原先img的位置并在img的位置上开始显示。

最后都解析完了，悬浮的元素总是落地的，所以悬浮着的img元素被“压”入之后的文字中，因为文字是流的形式，像水一样，就会包裹住img形成了“文字包裹”的效果。

float是一个魔鬼，它会改变之后元素的布局。

大家也可以理解成float属性是块头大的霸道大哥，没有float元素的是小老弟，小老弟看到了大哥，在没有其他要求的情况下小老弟要“敬重”大哥，要给大哥让路。

#float对块级元素的布局从代码中我们不难理解，三个div（红黄蓝）是三个块级元素，所以会换行罗列显示，即纵向布局显示。

Float的定位详解

Float的定位详解基本的浮动原理：任何元素element 都可以被浮动。

段落、div、list、tables,以及图像都可以被浮动，事实上即使是像span 和strong 这样的行内置元素也可以很好地进行浮动。

任何申明为float 的元素自动被设置为一个"块级元素", 这表示它可以具有申明的"width"和"height"属性。

事实上，floats当前被要求具有一个申明的宽度，但这不是现代浏览器制造者的思路，W3C以及开始同意这样的作法。

现在大多数人的意见是没有指定宽度的float应当伸缩包装到浮动内容的宽度。

因此，内部带有图片的一个float将和图片一样宽，带有文本的一个浮动将与该浮动内的最长文本行一样宽。

CSS2.1 的浮动规则中这样讲："如果width 是以auto 方式计算得到，使用的值是shrink-tofit 伸缩到适合的宽度。

" 所有现代的浏览器已经这样做，除了IE5/Mac。

除非浮动具有某种指定的宽度，否则该浏览器会变得错误百出。

现在大多数聪明的编码人员会让浏览器伸缩其没有宽度属性的floats，并使用一个隐藏的专门给IE5/Mac的宽度知识。

这可能不算很巧妙，但是它是现在不能满足该规范的极少数的浏览器，同时Mac用户有几种更好的选择。

MS停止了对IE5/Mac的支持，因此寻求像伸缩包装式浮动这样有用特性被避免的代价太高了，这样只有IE5/Mac用户不会看到错误的浮动。

浮动是如何进行的浮动"从流程中被移除出来", 但是与绝对位置的元素（层次）不同，浮动是在他们前面的最后一个块元素之后直接被显示出来（就像块盒一样）。

如果该浮动是在一个“行块”中，该浮动的上边界被放置在行块顶部的水平上。

当除此以外，浮动与绝对元素相似，原先的块盒会完全忽略浮动和AP元素。

那些静态的块盒知识保持一个接一个地”跟随“，就好像没有浮动不在那里一样。

cssfloat属性

cssfloat属性CSSfloat属性是一种布局方法，用于将元素浮动在其它元素之上，以达到布局和可视效果的目的。

float属性最初由W3C提出，用于控制文本排版时像把文本环绕框一样，在指定位置环绕其它元素。

float属性最常用于把图片放到文字中，让图片封装在文字中，并且文字自动环绕图片，而且不影响文字的排版，这就是float的最初的应用。

CSS的float属性字面意思是“浮动”，它的作用是让元素在页面中可以浮动起来，而不是像以往那样只能按照一定的顺序排列显示。

float的语法：float: left | right | none | inherit；其中left和right用于指定元素的浮动方向，none用于取消元素的浮动，而inherit表示继承父元素的float属性。

float属性的四个基本特性：1、元素浮动后，会从文档流中抽出，相当于从文档流中删除，它原来所在的位置会被其它元素所取代；2、浮动元素可以设置定位，并且可以让元素向左或者向右移动；3、浮动元素后面的元素会紧跟其后，就像浮动元素不存在一样；4、浮动元素可以设置margin，padding和border。

float的三种应用：1、使用float可以实现文字环绕图片的效果：把图片设为float，文字会自动环绕图片，并且不影响文字的排版；2、使用float可以控制文字和其他元素的排列顺序：如把文字设为float，它会移动到其它元素的左边或者右边，而不再按照文档流的顺序排列；3、行内元素的浮动：float可以让行内元素变成块级元素，这样就能设置宽高、margin、padding、border等样式。

float属性的注意点：1、浮动元素会导致文档的高度塌陷：如果父元素里有子元素浮动，父元素的高度就不会被子元素占据，因此就会出现文档高度塌陷的情况；2、浮动元素会影响页面布局：如果页面中有多个浮动元素，它们会相互影响，有可能会导致整页面的布局出现偏差；3、float不要过多：浮动元素会对页面性能产生影响，尽量不要让太多元素浮动，以免引起性能问题；4、clear应该与float相结合：要想避免文档塌陷，应尽量使用clear来消除浮动元素对文档高度的影响；5、float不要用于表格元素：Float是用来布局块级元素的，用于表格元素，它只能把表格元素变成文档流中的块级元素，但无法让表格元素按照float设置的位置浮动，因此应避免使用float来布局表格元素。

CSS---文档流布局脱标-postion-zindex脱标-浮动

CSS---⽂档流布局脱标-postion-zindex脱标-浮动⼀、css⽂档流布局概念1.1，什么是标准⽂档流1.2，标准⽂档流下有哪些微观现象⼆、CSS---position属性2.1，position：relative2.2，position：fixed2.3，position：absolute2.3.1，⽗默认(static)⼦绝2.3.2，⽗相(relative)⼦绝2.3.3，⽗固(fixed)⼦绝2.3.4，⽗绝(absolute)⼦绝2.4，z-index特性三、CSS之float属性3.1，浮动的特性3.2，浮动带来的问题：⼦div浮动不撑⾼⽗div----------------------------------------------------------------------------------------------------⼀、css⽂档流布局概念1.1，什么是标准⽂档流宏观的讲，web页⾯和ps等设计软件有本质区别web⽹页的制作是“流”的概念，从左向右，从上往下有三种情况将使得元素脱离⽂档流⽽存在，分别是浮动，绝对定位，固定定位。

1.2，标准⽂档流下有哪些微观现象1、空⽩折叠现象：所有的连续换⾏和空格会当成⼀个空格⾏内标签之间的空格会造成页⾯显⽰有空格，解决⽅法是把⾏内元素写在⼀⾏，或者给⾏内元素加浮动2、⾼矮不齐，底边对齐：⼀⾏的⾼度不⼀样，底边对齐3、⾃动换⾏：⼀⾏写不满换⾏写⼆、CSS---position属性2.1，position：relative特点： 1、不脱标 2、形影分离（影⼦和本⾝是是⼀对） 3、⽼家留坑⽤途：⽤途不⼤1、微调元素位置left、right、top、bottom2、做绝对定位的参考（⽗相⼦绝）2.2，position：fixed特点： 1，脱标 2,压盖效果这个参数是最好理解的。

它相对于浏览器的窗⼝进⾏定位。

滚动页⾯，fixed的位置不变2.3，position：absolute“ ⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗辈元素进⾏定位。