清除浮动

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;
}

代码演示：

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

.menu{ height: 50px; }

代码演示：

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;
}

代码演示：

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; }