无论如何，页脚都向右浮动答案

【问题标题】：Footer floating to the right no matter what无论如何，页脚都向右浮动
【发布时间】：2021-04-27 16:57:51
【问题描述】：

我正在尝试对齐section 中的一些项目，然后水平对齐div 中的一些项目，但在将它们浮动到left 并将footer 标签放在文档底部之后。@ 987654325@ 总是floats 到right 和内容的一侧，如果我尝试将部分的width 增加到40% 或更多，它只会将section 的内容推到底部而不是页脚

HTML

<body>
    <section id="box">

        <div class="container">

            <div class="box">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
                    height="150px" alt="">
                <h3>HTML markup</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quod debitis quae odit
                    nesciunt alias quas facere pariatur exercitationem.</p>
            </div>


            <div class="box">
                <div class="box"></div>
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
                    alt="" height="150px">
                <h3>CSS3</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quod debitis quae odit
                    nesciunt alias quas facere pariatur exercitationem.</p>
            </div>


            <div class="box">
                <img src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg" height="140px" alt="" w>
                <h3>Grahpic</h3>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At laboriosam quod debitis quae odit
                    nesciunt alias quas facere pariatur exercitationem.</p>
            </div>


        </div>


    </section>
    
    <footer>Testing testing testing:: copyright 2017 &copy;</footer>

</body>

CSS

#box .box {

    float: left;
    width: 30%;
    padding: 10px;
    text-align: center;

}

【问题讨论】：

标签： html css alignment css-float footer

【解决方案1】：

我更喜欢在这种布局中使用 flexbox。该部分可以由 div 包裹并使用display: flex; 推开<footer>（检查flex-centerclass）。我还建议您使用display: flex;、flex-direction: column; 和text-align: center; 来垂直对齐和居中每个内容（检查flex-colclass）。另外，如果部分图片可能被拉伸，可以使用object-fit: contain;进行修复。此外，我将底部的页脚位置设置为position: fixed; left: 0; bottom: 0;（检查css中的footer）。

(((另外，每列之间有更多的空格会很好。)))

#box .box {
  /* float: left;
  width: 30%;
  padding: 10px;
  /* text-align: center; */
}

.flex-center {
  margin: auto;
  display: flex;
  justify-content: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.flex-col img {
  object-fit: contain;
}

footer {
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #ffffff;

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <link rel="stylesheet" href="style.css" />

    <title>Static Template</title>
  </head>
  <body>
    <section class="" id="box">
      <div class="container flex-center">
        <div class="box flex-col">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png"
            height="150px"
            alt=""
          />
          <h3>HTML markup</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
            laboriosam quod debitis quae odit nesciunt alias quas facere
            pariatur exercitationem.
          </p>
        </div>

        <div class="box flex-col">
          <!-- <div class="box"></div> -->
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png"
            alt=""
            height="150px"
          />
          <h3>CSS3</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
            laboriosam quod debitis quae odit nesciunt alias quas facere
            pariatur exercitationem.
          </p>
        </div>

        <div class="box flex-col">
          <img
            src="https://designrfix.com/wp-content/uploads/2018/01/Graphic-_Design.jpg"
            height="140px"
            alt=""
            w
          />
          <h3>Grahpic</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. At
            laboriosam quod debitis quae odit nesciunt alias quas facere
            pariatur exercitationem.
          </p>
        </div>
      </div>
    </section>

    <footer>Testing testing testing:: copyright 2017 &copy;</footer>
  </body>
</html>

【讨论】：

【解决方案2】：

我在footer 中使用了clear:both，它起作用了。

【讨论】：