【28】CSS核心样式（6）——浮动属性（下）

★文章内容学习来源：拉勾教育大前端就业集训营

浮动是我们学习的第一种脱离标准流的方式。
继续上篇，本篇讲解• 浮动的问题 • 清除浮动方法

一、浮动的问题

1.浮动的子元素是撑不高标准流父元素

标准流中的元素，不设置高度的情况下，都能被内部的标准流元素自动撑高。如果内部的子元素进行了浮动，浮动的子元素是撑不高标准流父亲的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动的问题1.浮动的子元素是撑不高标准流父元素</title>
  <style> *{
     margin: 0; padding: 0; } .box {
     width: 500px; border: 10px solid #f00; } .box p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } </style>
</head>
<body>
  <div class="box">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

2 .影响标准流位置、影响贴边效果

父元素没有高度，会影响后面元素的标准流位置，如果浮动的子元素足够高时，有可能影响到后面浮动元素的贴边。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>浮动的问题2.影响标准流位置、影响贴边效果</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 500px; border: 10px solid #f00; } .box1 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } .box2 {
     width: 500px; border: 10px solid #00f; } .box2 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: pink; } </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

以上的问题需要被解决，解决方法是清除浮动带来的影响。

二、清除浮动

1.height ，给标准流的父元素强制给一个合适的高度：

（不做举例，可以参考前面的代码，给父元素加一个合适的高度，变化子元素的高度）
解决了：父元素有了高度，前面的浮动不能影响后面元素的标准流位置和贴边。
仍存在问题：父元素高度不是自适应，一旦子元素高度变化，问题可能再次出现。

2.clear属性

作用：清除标签元素自身受到的前面的浮动元素的影响。
属性值：left 清除前面左浮动带来的影响;
属性值： right清除前面右浮动带来的影响 ;
属性值：both 清除前面所有浮动带来的影响.
给标准流父元素添加 clear 属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
解决了：浮动问题的第2点：浮动元素影响后面元素标准流位置和贴边。
仍存在问题：父元素不能高度自适应，两个父元素之间如果有margin效果不正确。（不做举例，可以参考以下的代码，给父元素加一个margin，看看显示效果）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动2.clear属性</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 500px; border: 10px solid #f00; clear: both; } .box1 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } .box2 {
     width: 500px; border: 10px solid #00f; clear: both; } .box2 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: pink; } </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

3.隔墙法

外墙法：

在两个大的父盒子之间，添加一个空的<div> 标签，标签上带有 clear： both 属性。
解决了：浮动影响后面元素标准流位置和贴边，模拟父元素间的距离。
仍存在问题：父元素没有高度自适应。（问题同上）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动3.外墙法</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 500px; border: 10px solid #f00; } .box1 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } .boxwaiqiang {
     clear: both; } .box2 {
     width: 500px; border: 10px solid #00f; } .box2 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: pink; } </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="boxwaiqiang"></div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

内墙法：

在父元素内部，所有的浮动子元素后面添加一个空的 <div> 元素，标签高度为0 ，添加clear 属性。
解决：父元素高度自适应，浮动影响后面的元素位置和贴边。
缺点：浮动是css 样式属性带来的问题，内墙法使用HTML 结构去辅助解决问题，如果页面中浮动元素很多，需要添加多个没有语义的空标签，造成HTML 结构的冗余。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动3.内墙法</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 500px; border: 10px solid #f00; } .box1 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } .NQ .boxneiqiang {
     height: 0; clear: both; } .box2 {
     width: 500px; border: 10px solid #00f; } .box2 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: pink; } </style>
</head>
<body>
  <div class="box1 NQ">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="boxneiqiang"></div>
  </div>
  <div class="box2 NQ">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="boxneiqiang"></div>
  </div>
</body>
</html>

4.伪类

本质是使用伪类方法利用css 代码书写一堵内墙。
伪类选择器：通过选中的标签添加伪类，去选中标签的某个状态或位置。
:after ：这个伪类表示选中的是某个标签内部的最后的位置。
书写方法：前面必须加普通的选择器，后面连续书写伪类名称。
将伪类添加给一个选中父盒子的选择器后面，一般给需要清除浮动的父盒子设置一个clearfix 的类名。
解决：父元素高度自适应，浮动影响后面的元素位置和贴边。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动4.伪类</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 500px; border: 10px solid #f00; } .box1 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } .box2 {
     width: 500px; border: 10px solid #00f; } .box2 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: pink; } .clearfix:after {
     content: "1"; display: block; height: 0; clear: both; visibility: hidden; } </style>
</head>
<body>
  <div class="box1 clearfix">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2 clearfix">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

5.overflow：hidden；溢出隐藏(小偏方)

给内部有浮动子元素的父元素添加溢出隐藏小偏方overflow: hidden;属性，可以解决浮动的所有问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动5.overflow</title>
  <style> *{
     margin: 0; padding: 0; } .box1 {
     width: 500px; border: 10px solid #f00; overflow: hidden; } .box1 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: skyblue; } .box2 {
     width: 500px; border: 10px solid #00f; overflow: hidden; } .box2 p {
     float: left; width: 100px; height: 100px; margin-right: 10px; background-color: pink; } </style>
</head>
<body>
  <div class="box1">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <div class="box2">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
  </div>
</body>
</html>

补充：overflow 属性

元素高度设置后，overflow：hidden；效果是将超过高度的部分直接隐藏。
元素高度没有设置时，如果元素同时设置了overflow：hidden属性，元素会自适应内容的高度。(小偏方的原理）
高度自适应原因：一个元素没有设置高度，同时设置了溢出隐藏，浏览器在加载盒子尺寸时，遇到溢出隐藏浏览器会强制性去检索内部的子元素的高度，不论子元素是标准流还是浮动，都会将最高的高度作为父盒子高度加载。
浮动影响后面的元素：父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。

★总结:
如果父元素高度是固定的，建议使用 height 属性解决;
如果父元素高度需要自适应，建议使用 overflow 属性解决浮动问题。

下篇继续：【29】CSS核心样式（7）——认识 a标签的四个伪类选择器