footer文本无法实现左右分栏对齐问题求助

嘿，我来帮你搞定这个小问题！你现在遇到的情况是footer里的文本分两行居中，没法左右对齐在同一行，主要是几个小细节没调整到位，我给你两种解决方案，一种是修复你原来的浮动写法，另一种是用更简单的现代布局方式，你可以选适合自己的：

方案一：修复浮动布局（基于你原来的代码修改） #

你原来的代码里有两个小问题：

1. .footer 里的 text-align: center 会让内部的div容器居中收缩，导致浮动的p元素没有足够的横向空间在同一行展示
2. 清除浮动的div样式引号没写对，类名的写法也有点小问题

修改后的代码如下：

HTML代码 #

<footer class="footer">
  <div>
    <p class="alignleft">Copyright &copy; Ask Alansky 2019</p>
    <p class="alignright">Empowered by gA</p>
    <div class="clearboth"></div>
  </div>
</footer>

CSS代码 #

.footer {
  padding: 25px 0;
  width: 100%;
  box-sizing: border-box; /* 防止padding撑大footer宽度 */
}
.footer > div {
  width: 100%; /* 让内部容器占满footer的宽度，给浮动元素足够空间 */
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.clearboth {
  clear: both; /* 清除浮动，避免footer高度塌陷 */
}

方案二：用Flexbox布局（更简单，推荐新手使用） #

浮动布局需要处理清除浮动，容易踩坑，现在更推荐用Flexbox来实现这种左右对齐的效果，代码更简洁，也不容易出问题：

HTML代码 #

<footer class="footer">
  <p>Copyright &copy; Ask Alansky 2019</p>
  <p>Empowered by gA</p>
</footer>

CSS代码 #

.footer {
  padding: 25px 0;
  display: flex;
  justify-content: space-between; /* 让两个p元素分别靠左右对齐 */
  align-items: center; /* 让文本垂直居中 */
  width: 100%;
  box-sizing: border-box;
}

这样设置后，两个文本就会乖乖地在同一行左右对齐啦！Flexbox是现在前端布局的主流方式，新手可以多了解一下，比浮动好用太多~

内容的提问来源于stack exchange，提问作者Felipe Vidal