解决浮动异常的四种方法

解决浮动异常的四种方法

1.概念什么是浮动

​ float（浮动）是CSS中的定位属性，会使元素脱离文本流从左向右或者从右向左移动，用于设置标签对象（如：

标签盒子、

标签、

• 标签等html标签）的浮动布局。只要设置了浮动，标签将脱离普通文本流，下方的内容会自动上移。解决的办法是：使用clear属性清除浮动带来的效果。

2.浮动异常

​ 因为浮动的元素脱离文本流，导致其原来的位置空出，由后面的元素补上，使界面出现错乱。

3.解决办法

1.空的div标签清除浮动，clear:both;

​ 2.父级标签设置固定高度

​ 3.父级标签设置overflow:hiden;

​ 4.伪元素实现元素末尾添加一个看不见的块元素(推荐使用)

​ .clearfix::after

​ {

​ content: “”;

​ display: block;

​ clear: both;

​ }

4.效果及代码展示

未使用float属性之前正常的效果：

test1使用float后出现浮动异常：

解决方法；

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

​ .test1{

​ width: 100px;

​ height: 100px;

​ background-color: bisque;

​ float: left;

​ }

​ .test2{

​ width: 100px;

​ height: 100px;

​ background-color: red;

​ }

​ .clear{

​ /* 1.空的div标签清除浮动，clear:both; */

​ clear: both;

​ }

​ .father{

​ /* height: 100px; */

​ overflow: hidden;

​ }

​ .test3,.test5{

​ width: 100px;

​ height: 100px;

​ background-color: bisque;

​ float: left;

​ }

​ .test4,.test6{

​ width: 100px;

​ height: 100px;

​ background-color: red;

​ }

​ .clearfix::after{

​ content: “”;/注意这里的值必须为空/

​ display: block;

​ clear: both;

​ }

<div class="test1">test1</div>

<div class="clear"></div>

<div class="test2">test2</div>

test3

<div class="test4">test4</div>

<div class="clearfix"> <div class="test5">test5</div></div>

<div class="test6">test6</div>

clear: both;

​ }

​ */ -->

<div class="clearfix"> <div class="test5">test5</div></div>

<div class="test6">test6</div>