浮动与高度塌陷

最新推荐文章于 2024-07-17 16:17:24 发布

呆码王子

最新推荐文章于 2024-07-17 16:17:24 发布

阅读量62

点赞数 1

分类专栏： HTML 文章标签： html5 css 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129366383

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

浮动简介

浮动概念：是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流

就不再具有元素在文档流中的特点，从而帮助我们布局

2、设置浮动：float样式名

可选值：

none 不浮动默认值

left 向左浮动

right 向右浮动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #box {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box4{
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
      .box1{
        background-color: red;
        float: left;

      }
      .box2{
        background-color: green;
        width: 150px;
        height: 150px;
        float: left;
      }

    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1 box4"></div>
      <div class="box2 box4"></div>
      <div class="box3 box4"></div>
    </div>
  </body>
</html>

浮动特点

基本特点

a:一旦元素设置了浮动，元素就会脱离文档流，

它原来在文档流中位置，就没有了，后面的元素就会跑上去，顶上

b:元素设置浮动，会尽可能的向页面的左上或者右上进行浮动

c:浮动的元素不会超出它的父元素

d:浮动的元素不会超过它上一个兄弟元素，最多一边齐

e：如果浮动的元素上一个兄弟元素没有浮动，浮动元素也不会跑上去

特殊点

当浮动元素元素碰到了文字，浮动元素不会盖住文字，而文字会环绕在浮动元素

周边。从而出现一种文字环绕图片的效果，这也是浮动最早的一个作用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      #box{
        width: 400px;
        height: 400px;
        border: 1px solid green;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: rgba(255, 0, 0,.3);
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="box1"></div>
      <p class="p1">
        者活有间韩斗谓先今德恶，舟九和，子郭章国极的非花郭不，否宫的娘生第白廿对其头羊，为即甲总保你心能和觉程上胜临韩，变感清应说人为，十尤陛救千烦才秦然两九不事应太苦败答，此洪道胜怒，洪谓五以斯作秦，花败纯破不足，弟我久锐到使姑己不死有到感有考中措时，的是只接。
        韩样统感牙范币否自了，骨讨到灰面，爱卑易，帝此娘沾全他死，帝日满与留罪，衣惜到太落千不撒，么活上己韩一一人者官准只尘特，准同王尽统航王仃活无，能快死生天洋磊，专处耳非的诗得五安谋兮里制联交，同领之会变最杀的逃别他我她才，判兼哥也当商法说身司弟搏切皮六瞠骨。
      </p>
    </div>
  </body>
</html>

特点三

当元素设置浮动以后，会完全脱离文档流，元素的一些特点也会发生改变

脱离文档流的特点

块元素：

1:块元素不再独占页面的一行

2:块元素的宽高默认被内容撑开，如果设置，就按设置

行内元素：

1:浮动过后的行内元素更像行内块元素,默认宽度为内容的宽度，可以设置宽高

行内块元素：

也没有图片三像素的问题

总结：当元素设置浮动以后,脱离文档流，就不需要再区分块和行内，行内块

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      div{
        width: 100px;
        height: 100px;
        background-color: red;
        /* float: left; */
      }
      .s1{
        background-color: pink;
        float: left;
        width: 100px;
        height: 100px;

      }
    </style>
  </head>
  <body>
    <div class="box1">我是box1</div>
    <span class="s1">我是s1</span>
    <div class="box2">我是box2</div>
  </body>
</html>

高度塌陷

定义：

一般情况，我们的父元素是不设置高度的，让其被内容自动撑开，如果子元素设置浮动了，

子元素会脱离文档流，就不能再撑开父元素的高度，从而导致父元素的高度丢失，导致页面布局的混乱

这就是高度塌陷问题，这个问题也必须要解决

解决高度塌陷

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .outer {
        /* height: 100px; */
        border: 10px red solid;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>

    <div class="box3"></div>
  </body>
</html>

方案一：给父元素设置固定高度,但不推荐使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .outer {
        height: 100px;
        border: 10px red solid;
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }

      .box3 {
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>

    <div class="box3"></div>
  </body>
</html>

方案二：给元素开启BFC

定义：

1、什么是BFC(Block Formatting Context) 块级格式化上下文，元素的隐含属性

开启BFC后，就相当于把元素单独隔离，成为一个独立的区块，不影响页面的其他元素

2、开启BFC后，元素有什么特点

（1）、父元素的垂直外边距就不会跟子元素垂直外边距重叠了（可以解决父子外边距重叠的问题）

（2）、开启BFC的元素不会被浮动元素覆盖

（3）、开启BFC的元素可以包裹住浮动的元素（也就是可以解决高度塌陷问题）

3、如何开启BFC

（1）、设置元素浮动

虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

（2）、将元素转成行内块元素

也可以解决高度塌陷，但宽度丢失，而且会带来三像素问题，也一定程度上影响页面的布局

（3）、利用overflow样式，非visible默认值可以是auto、hidden、scroll

可以解决高度塌陷问题，最大程度不影响页面的布局，副作用相对较小，建议使用

（4）、设置绝对定位

虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
  
      .outer {
        /* height: 100px; */
        border: 10px red solid;
        /* 设置浮动 */
        float: left;
        /* 转成行内块元素 */
        /* display: inline-block; */
        /* overflow属性 */
        /* overflow: hidden; */
        /* 设置绝对定位 */
        /* position: absolute; */
      }

      .inner {
        width: 100px;
        height: 100px;
        background-color: rgba(0, 0, 255,.4);
        /* float: left; */
      }

      .box3 {
        height: 100px;
        background-color: yellow;
        overflow: hidden;
      }
      .box1{
        width: 200px;
        height: 200px;
        background-color: royalblue;
        /* overflow: hidden; */
        /* float: left; */
        /* display: inline-block; */
        /* position: absolute; */

      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: pink;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box3"></div>

    <!-- <div class="box1">
      <div class="box2"></div>
    </div> -->
  </body>
</html>

方案三：结合clear样式，解决高度塌陷

清除浮动：

由于受到box1浮动的影响，box2整体向上移动了100px

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

none，默认值，不清除浮动

left，清除左侧浮动元素对当前元素的影响

right，清除右侧浮动元素对当前元素的影响

both，清除两侧浮动元素对当前元素的影响

清除对他影响最大的那个元素的浮动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: yellow;
        float: left;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellowgreen;
        float: right;
      }
      .box3 {
        width: 300px;
        height: 300px;
        background-color: skyblue;
        clear:both ;
      }
    </style>
  </head>
  <body>
    <!-- 需求，设置box1左浮动，box2右浮动，而box3待在原地不动 -->
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </body>
</html>

方案四：结合clear、伪类，解决高度塌陷

定义：

可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，

这样做和添加一个div的原理一样，可以达到一个相同的效果，

而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        border: 10px solid red;
      }

      .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        float: left;
      }
      .box1::after{
        /* 添加一个内容 */
        content: '';
        /* 将内容转成块元素或表格 */
        display: table;
        /* 清楚两侧浮动带来的影响 */
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

完善

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 300px;
        height: 300px;
        background-color: #bfa;
        /* 父子外边距重叠解决一 */
        /* overflow: hidden; */
      }
      /*
              解决父子元素的外边距重叠方法二

                display:table可以将一个元素设置为表格显示
             */
      /* .box1::before{
         content: '';
         display: table;
       } */
      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-top: 200px;
      }

      /* 演示高度塌陷 */
      .box3 {
        border: 10px red solid;
      }
      /* .box3::after{
        content: '';
        display: table;
        clear: both;
      } */

      .box4 {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        float: left;
      }

      /*
             整合两种写法，可以同时解决父子外边距重叠的问题，
            高度塌陷的问题
             */
      .clearfix::before,
      .clearfix::after {
        /* 添加内容 */
        content: "";
        /* 将内容转成表格 */
        display: table;
        /* 清除两侧浮动带来的影响 */
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="box3 clearfix">
      <div class="box4">box4</div>
    </div>

    <div class="box1 clearfix">
      <div class="box2">box2</div>
    </div>
  </body>
</html>

呆码王子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与高度塌陷

浮动概念：是一种布局方式，可以让元素脱离文档流，一旦元素脱离文档流就不再具有元素在文档流中的特点，从而帮助我们布局 2、设置浮动：float样式名可选值： none 不浮动默认值 left 向左浮动 right 向右浮动
复制链接

扫一扫