【28】CSS核心样式（6）——浮动属性（下）-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

程序员的人生

1617

文章

928127

访问

+关注

分类

暂无分类

日期归档

2023-05(1)

2023-06(4)

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

发布于2021-04-09 07:03 阅读(1058) 评论(0) 点赞(0) 收藏(2)

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

浮动是我们学习的第一种脱离标准流的方式。
继续上篇，本篇讲解• 浮动的问题 • 清除浮动方法
在这里插入图片描述

一、浮动的问题

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标签的四个伪类选择器

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果