css浮动及清除浮动副作用的三种解决方法

原创

已于 2024-07-23 15:21:00 修改 · 1.2k 阅读

标签

#css #前端

收录于

于 2024-07-09 17:43:36 首次发布

css浮动及清除浮动副作用的三种解决方法

文章目录

css浮动及清除浮动副作用的三种解决方法

一、浮动定义

浮动（Float）是CSS中一种布局技术，用于使元素沿其容器的左侧或右侧浮动，并允许文本和内联元素围绕它。浮动的常见应用是在创建多列布局或在文本中插入图片时。

理解：浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。

二、浮动元素设置

1、使用 float 属性可以将元素向左或向右浮动。例如，float: left; 将使元素向左浮动，允许其他内容环绕其右侧。

			.myclass1{
				width: 50%;
				float: left;
			}

2、浮动的副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。

3、浮动的清除：当一个元素浮动后，其父元素的高度将不再自动扩展以适应浮动元素的高度。这时需要清除浮动。

理解：想将盒子向左或右排列，就需要使用浮动，但浮动会导致父级元素被撑开管不住子级元素，就需要方法清除这个副作用。

三、清除浮动副作用方法一

对父级元素设置适合CSS高度

这里使用类选择器选中父级div,用id选择器选择两个子级div，并分别增加样式，最后给子级div增加向左浮动样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.Myclass{
     
     
				border: blue 3px solid;
			}
			#box01{
     
     
				width: 50px;
				height: 50px;
				border: red 2px solid;
				float: left;
				}
			#box02{
     
     
				width: 50px;
				height: 50px;
				border: green 2px solid;
				float: left;
			}
		</