左浮动盒子后盒子没有靠左对齐（之前布局对后面的影响）

最新推荐文章于 2023-03-16 11:33:48 发布

pacong

最新推荐文章于 2023-03-16 11:33:48 发布

阅读量391

点赞数

分类专栏： html+css 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/pacong/article/details/129189577

版权

html+css 专栏收录该内容

4 篇文章

订阅专栏

左浮动盒子后盒子没有靠左对齐（之前布局对后面的影响）

问题描述

在布局一个盒子的时候，需要上图的青色盒子左浮动，橙色盒子右浮动。
对青色盒子使用了float: left;之后始终无法左对齐，在网上寻找了诸多方法后，始终无法解决。然后就开始F12调试。然后发现是上面的布局影响到了下面的盒子。下面给出问题代码片段

代码示例

html部分

<!-- box2模块开始 -->

    <div class="box2 w">
      <div class="box2-hd">
        <h3>编程入门</h3>
        <ul>
          <li><a href="#">热门</a></li>
          <li><a href="#">初级</a></li>
          <li><a href="#">中级</a></li>
          <li><a href="#">高级</a></li>
        </ul>
        
        <a href="#">查看全部</a>        
      </div>

      <div class="box2-bd">
        <div class="bd-left">
          123
          <!-- <img src="images/study/box2_left.png" alt=""> -->
        </div>
        <div class="bd-right">456</div>
      </div>
      
    </div>
    <!-- box2模块结束 -->

css部分代码

* {
  margin: 0;
  padding: 0;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

body {
  background-color: #f3f5f7;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}


/* box2 */
.box2 {
  margin-top: 15px;
}

.box2-hd {
  height: 45px;
  background-color: pink;
}

.box2-hd h3 {
  float: left;
  font-size: 20px;
  color: #494949;
  padding-top: 5px;
}
.box2-hd ul {
margin-left: 310px;
}

.box2-hd ul li a {
  float: left;
  font-size: 16px;
  color: #a5a5a5;
  height: 45px;
  padding-left: 40px;
}

.box2-hd ul li a:hover {
  color: #00a4ff;
}

.box2-hd a {
  float: right;
  font-size: 12px;
  color: #a5a5a5;
  margin-top: 10px;     /* 注意 注意 注意 主要影响问题的代码*/
  margin-right: 30px;
  background-color: #fff;
}

.box2-hd a:hover {
  color: #00a4ff;
}

.box2-bd {
  height: 392px;
  width: 1200px;
  background-color: #00a4ff;
  
}
.box2-bd .bd-left {
  float: left;
  height: 392px;
  width: 228px;
  background-color: #bff69d;
 
}

.box2-bd .bd-right {
  float: right;
  height: 392px;
  background-color: #f3b55f;
}

解决方法

.box2-hd a {
  float: right;
  font-size: 12px;
  color: #a5a5a5;
  line-height: 45px;   /* 修改为垂直居中 */
  margin-right: 30px;
  background-color: #fff;
}