1、给浮动元素的祖先添加高度来清除子元素浮动对布局的影响

<ul>
  <li>html</li>
  <li>css</li>
  <li>js</li>
  <li>h5</li>
</ul>
<ul>
  <li>html</li>
<div class="menu">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>
<div class="menu1">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>

css样式:

* {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

.menu ul li {
  float: left;
  background-color: lightyellow;
  margin-left: 5px;
  font-size: 30px;
}

.menu1 ul li {
  float: left;
  margin-left: 5px;
  font-size: 30px;
}

代码演示:

202101081610071802674627

可以看到本该换行的div.menu1和menu显示在一行里,这时我们就可以通过给menu来添加高度实现清除浮动:

.menu{ height: 50px; }

代码演示:

202101081610072034124085

2、通过给布局中受影响的盒子添加clear:both;clear就是清除,both指的是左右浮动都清除。

    缺点:会让盒子的margin属性失效

<div class="menu">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>
<div class="menu1 clear">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>

css样式:CSS

* {
  padding: 0;
  margin: 0;
}
li {
  list-style-type: none;
}
.menu ul li {
  float: left;
  background-color: lightyellow;
  margin-left: 5px;
}
.menu1 ul li {
  float: left;
  background-color: lavenderblush;
  margin-left: 5px;
}
.clear {
  clear: both;
}

代码演示:

202101081610072293120671

3、(1)隔墙法:隔开两部分浮动

    在两个大盒子之间建起一堵墙 清除别人对我的影响

<div class="menu">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>
<div class="wmq"></div>
<div class="menu1">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>

css样式中添加:

.wmq{ clear: both; }

(2)内墙法:清除li元素内部浮动

<div class="menu">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
  <div class="wmq"></div>
</div>
<div class="menu1">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>

css样式:

.wmq{ clear: both; }

4、给祖先元素添加overflow:hidden;溢出隐藏:把溢出边框的内容隐藏起来 (作用在影响别人的盒子身上)

<div class="menu ">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
  </ul>
</div>
<div class="menu1">
  <ul>
    <li>html</li>
    <li>css</li>
    <li>js</li>
    <li>h5</li>
    </ul>
</div>

css样式:

.menu{ overflow: hidden; }