css浮动定位代码

CSS浮动定位是一种布局技术，它允许元素脱离正常的文档流，并可以左右浮动，常用于图文混排、多栏布局等场景。

基础概念

浮动（Float）：通过float属性，可以让元素脱离标准普通流的控制，移动到其父元素中的指定位置。
清除浮动（Clear）：当一个元素浮动之后，该元素的父元素会无法完全包裹它，所以为了防止布局错乱，有时候需要对某个元素进行清除浮动。

类型

左浮动（left）：元素向左浮动。
右浮动（right）：元素向右浮动。

应用场景

图文混排：使文字环绕在图片周围。
多栏布局：创建并排的列。
创建导航菜单：使菜单项水平排列。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Float Example</title>
<style>
  .container {
    width: 400px;
    border: 1px solid black;
  }
  .float-left {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .float-right {
    float: right;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  .clear {
    clear: both;
  }
</style>
</head>
<body>

<div class="container">
  <div class="float-left">Left</div>
  <div class="float-right">Right</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <div class="clear"></div>
</div>

</body>
</html>

遇到的问题及解决方法

问题：父元素无法包裹浮动元素

原因：当子元素浮动后，它会脱离正常的文档流，导致父元素无法正确计算其高度。

解决方法：

使用clear属性：在浮动元素后添加一个空的div，并设置clear:both。
使用overflow属性：给父元素设置overflow:auto或overflow:hidden。
使用clearfix类：使用CSS伪元素:before和:after来清除浮动。

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}

<div class="container clearfix">
  <div class="float-left">Left</div>
  <div class="float-right">Right</div>
  <p>Lorem ipsum dolor sit amet...</p>
</div>