css浮动_开启浮动-CSDN博客

本文链接：https://blog.csdn.net/bao__zao/article/details/122320912

通过浮动可以使一个元素向其父元素的左侧或右侧移动
使用 float 属性来设置于元素的浮动
可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动

注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动。任何元素加浮动后变成行内块元素。如果块元素没有设置宽度，默认与父元素一样宽，加了浮动后，宽度由内容决定

浮动常和标准盒子一起用，一般页面垂直布局都用标准盒子，每个盒子内用浮动排列

浮动元素会完全脱离文档流，不再占据文档流中的位置，所以元素下边的还在文档流中的元素会自动向上移动

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: purple;
    /*float: right;*/
  }
  .inner{
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>
<body>
  <div class="box"></div>
  <div class="inner"></div>
</body>

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: purple;
    /*float: left;    加上float   页面上只有一个左上角的紫色，绿色的在紫色下面*/
    float: right;
  }
  .inner{
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>
<body>
  <div class="box"></div>
  <div class="inner"></div>
</body>

设置浮动以后元素会向父元素的左侧或右侧移动，浮动元素默认不会从父元素中移出
浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

<style>
  			.box1{
            width: 100px;
            height: 100px;
            background-color: purple;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: #3e8e;
            float: left;
        }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
//从左到右依次排列

如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移

.box1{      //他没浮动，div会单独占一行
	width: 100px;
	height: 100px;
	background-color: purple;
}
.box2{
	width: 100px;
	height: 100px;
	background-color: green;
	float: left;
}
.box3{     //这个元素只能在第二行的最右面，因为上面是个div
	width: 100px;
	height: 100px;
	background-color: #3e8f3e;
	float: right;
}

.box1 {
	// 脱离文档
  float: left;
  width: 200px;
  height: 200px;
  background-color: purple;
}
.box2 {
// 浮上去
  width: 300px;
  height: 150px;
  background-color: green;
}
.box3 {
// 上边沿贴着box2，左边沿贴着box1
  width: 300px;
  height: 240px;
  background-color: #435e43;
  float: left;
}

在这里插入图片描述

高度塌陷问题

在写网页时一般不希望网将父元素高度写死，希望父元素跟着他子元素高度一起变

<style>
    #shit{
        border: 5px solid red;
        height: auto;    /*高度由子元素撑开*/
    }
    #cao{
        height: 100px;
        width: 100px;
        background-color: green;
        float: left;     /*希望这两个子元素并排放在父元素中*/
    }
	#nima{
        height: 100px;
        width: 100px;
        background-color: yellowgreen;
        float: left;
    }
</style>
<div id="shit">
    <div id="cao"></div>
    <div id="nima"></div>
</div>

会出现下图的问题，由于这俩浮动，就脱离了文档流。父元素就变成个边框了。另外正常在父元素下面的元素位置也会往上走。

BFC(Block Formatting Context) 块级格式化环境

- BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素

- 可以通过一些特殊方式来开启元素的BFC：
1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素（不推荐）
3、将父级元素的overflow设置为一个非visible的值
- 常用的方式 为父级元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

clear

如果我们不希望某个元素因为其他元素浮动的影响而改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
 clear
 - 作用：清除浮动元素对当前元素所产生的影响
 - 可选值：
 left 清除左侧浮动元素对当前元素的影响
 right 清除右侧浮动元素对当前元素的影响
 both 清除两侧中最大影响的那侧

原理：
设置清除浮动以后，浏览器会自动为元素添加一个上外边距，
以使其位置不受其他元素的影响
比如对于box3，使用clear: left;之后浏览器会检测box1的height，并且给box3自动加上margin-top: box1的height;

未使用浮动时如下图

现在对1和2分别使用左、右浮动如下图

对box3使用clear: left;之后会去除左浮动带来的影响

对box3使用clear: right;之后会去除右浮动带来的影响

对box3使用clear: both;之后由于右浮动对box3影响更大，所以结果和right的一样

after：最终版本

<style>
  .box1{
    border: 5px solid red;
  }
  .box2{
    width: 100px;
    height: 100px;
    background-color: yellow;
    float: left;   /*box2浮动*/
  }
</style>
<div class="box1">
  <div class="box2"></div>
</div>

box1只有一个子元素box2，当box2脱离文档流后就没有别的子元素能撑开box1了

<div class="box1">
    <div class="box2"></div>
    <div class="box3">aa</div>
</div>

现在再加一个子元素box3。由于是文字就环绕了。这里看来box1确实被aa给撑开了，那么如果能将aa放在黄块下面，box1就会正常包住了

//只需要打开box3的BFC，使box3不受左浮动的影响。这样即使改box2的高度，红框会始终包住所有
.box3{
	clear: left;
}

最后把aa删掉就可以了

但是凭空多加了一个box3标签，而高度塌陷是表现方面的问题，应该用CSS解决

我们的思想就是在box1中加一个东西让他能撑起来box1

//通过伪元素在box1最后加一个内容
.box1::after{
	content: 'shit';
	clear: left;
}

但是因为伪元素是行内元素，所以现在shit会出现在黄块右边所以要转换成块元素

.box1::after{
	display: block;
	content: 'shit';
	clear: left;
}

最后把shit删掉就行了。最终版本如下

.box1::after{
	display: block;
	content: '';
	clear: left;
}

clearfix

<style>
  .box1{
    width: 200px;
    height: 200px;
    background-color: green;
  }

  .box2{
    width: 100px;
    height: 100px;
    background-color: yellow;
    margin-top: 30px;   /*父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
    想让子元素向下30px，结果box1回纥box2一起向下30px*/
  }
</style>
<div class="box1">
  <div class="box2"></div>
</div>

父子元素间相邻外边距，子元素的会传递给父元素（上外边距）。所以让他俩不相邻就行了

.box1::before{
	content: '';
	display: table;   //这里只能用table
}

与after合并为下面

<style>
	.box1{
     	width: 200px;
        height: 200px;
        background-color: #bfa;
     }

	.box2{
	    width: 100px;
	    height: 100px;
	    background-color: orange;
	    margin-top: 100px;
	}
	.clearfix::before,
	.clearfix::after{
		content: '';
		display: table;
	}
	.clearfix::after{
		clear: both;
	}
	.clearfix{
		*zoom: 1;   // 兼容
	}
</style>
<div class="box1 clearfix">
      <div class="box2"></div>
</div>