深入理解HTML5浮动布局-CSDN博客

本文链接：https://blog.csdn.net/CSDN_GMC/article/details/104226498

本文探讨了HTML5中float属性的使用，包括浮动的定义、浮动对元素的影响以及清除浮动的重要性。通过浮动，元素可脱离文档流并实现并排布局，但不正确处理浮动可能导致父元素高度塌陷。文章介绍了清除浮动的必要性和常见方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

H5布局阶段--浮动

一. float: 浮动
二. 浮动产生的影响
三. 清除浮动的常见方法

一. float: 浮动

浮动定义：使元素脱离文档流

  float：
        none: 不浮动；（默认）
        left: 向左浮动；
        right: 向右浮动；
        
        auto: 根据自身所占位置，自动居中
            1.自身必须有宽高
            2.inline-block 或 float 都会使auto失效
            需要填写具体值来调整元素位置

所有的元素都可以浮动。
具有float属性元素在父标签中是不占空间的。
float能解决标签之间有间隙的问题。

二. 浮动产生的影响

  1.自身的父元素无法获取宽高
  2.后续的元素会自动补位
  3.浮动会脱离当前文档流，覆盖标准流的元素
  4.auto会失效
  5.块元素可以横排显示(失去独占一行的特性)
  6.行元素可以设置宽度和高度
  7.除了auto以外，依然支持margin
  8.提升半个层级 z-index(后续课程)

浮动的特性

float 对行内属性标签的影响
float之后可以设置width和height属性，
并支持margin和padding属性
float 对块属性标签的影响
在没有设置宽高的情况下浮动后，内容撑开宽度高度
可以使块属性元素并排排列
使用浮动布局，那么一定要清除浮动，否则原地爆炸！

三. 清除浮动的常见方法

为什么要清除浮动？
父元素的高度是由子元素撑开的，且子元素设置了浮动，父元素没有设置浮动，子元素脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动，父元素会出现高度不够，那样如果设置border、background、margin设置值，都得不到正确的解析

有以下几种：

  1. 给父级设定宽高
     缺点：父级如果作为容器，直接就写死了，后续元素添加会出问题，而且无法解决元素重叠的问题    
          不推荐使用！ 了解即可

  2. 使用 overflow ：hidden 属性 (超出内容区域的部分，隐藏)
     给父元素添加
     缺点：如果内容需要超出，或者较多时.需求发生冲突
          如果内容没有超过，推荐使用。 较为方便          
     适用场景： 浮动元素较少。

  3. 使用 clear: both  属性;
     clear: 是否允许浮动
         left:  不允许左侧有浮动
         right: 不允许右侧有浮动
         both:  不允许两侧有浮动
     缺点：需要写一个空标签来绑定 clear属性.  
         这个空标签没有html的作用，不符合html标签语义化    
    
  4. 给父级设置 display: inline-block;
     缺点: 父元素的同级之间会留有间隔

  5. 各大主流浏览器之间，兼容性最高的一款，你值得拥有~
      :after伪类： 在....之后添加.....

     语法示例：
     //制作工具
     .clearfix:after{
            content: "";
            display: block;
            height: 0px;
            clear: both;
     };
     
     //激活工具
     .clearfix{
        zoom:1;
     }
     
     //使用工具
     <div class="box clearfix">
           <div class="left">我是左浮动</div>
     </div>

    内联块会围绕着浮动的元素

<!DOCTYPE html>
<html>
<head>
	<title>浮动-1</title>

	<style type="text/css">
	#main{
		border:1px solid black;
	}

	#main>div{
		width: 200px;
		height: 200px;
		text-align: center;
		line-height: 200px;
		font-size: 30px;
		color: white;
	}
	.box1{
		/*float: 浮动
			none: 不浮动; 默认
			left: 向左浮动;
			right: 向右浮动;
	
		*/
		float: left;
		background-color: red;
	}
	.box2{
		float: left;
		background-color: green;

		/*auto: 根据自身所占位置，自动居中
			    1.自身必须有宽高
				2.inline-block 或 float 都会使auto失效
				需要填写具体值来调整元素位置
		*/
		margin: 0px 300px;
	}
	.box3{
		float: right;
		background-color: blue;
	}

	.box4{
		width: 200px;
		height: 200px;
		float: left;
		background-color: yellow;
	}

		 .clearfix:after{
				content: "";
				display: block;
				height: 0px;
				clear: both;
		 };
				/*//激活工具*/
		 .clearfix{
			zoom:1;
		 }

	</style>
</head>
<body>

<!--2. 使用 overflow -->
<div id="main" style="overflow: hidden;">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
</div>
	
<!-- 3. 使用空标签 添加clear属性 -->
<div id="main">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>

	<div style="clear: both; width: 0px; height: 0px"></div>
</div>


<!-- 4. 父元素添加 display： inline-block 属性 -->
<div id="main" style="display: inline-block;">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
</div>


<!-- 5. 使用主流方式， 在css中 制作工具，激活工具。 在html使用(绑定类名) -->
<div id="main" class="clearfix">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
</div>
</body>
</html>