css - 图像 float 问题

Question

我需要有关 Angela 网络开发类(class)“模块 5 - 18. CSS float 和清除”图像 float 的帮助。我试过让技能图像 float ，但第二个技能的图像总是乱七八糟。

我做错了什么？

我尝试将两个“技能”图像分组到一个 round 类中并使用:

.round-skill {
  float: left;
}

但只有顶部的技能图像按计划进行。下面的技能图像和下面的其他元素(如页脚)消失了

.skill-row {
  width: 50%;
  margin: 100px auto 100px auto;
  text-align: left;
}

.skill-row-sub {
  text-align: left;
  line-height: 2;
}

.skill-row-tab-title {
  text-align: left;
}

.round-skill-1 {
  float: left;
}

<div class="skills">
  <h2>My Skills.</h2>
  <div class="skill-row">
    <img class="round-skill-1" src="images/avatar.png" alt="">
    <h3 class="skill-row-tab-title">Frontend Development</h3>
    <p class="skill-row-sub">I develop website interface designs using frontend technologies such as HTML and CSS. Still learning Javascript and its frameworks.</p>
  </div>
  <div class="skill-row">
    <img class="round" src="images/avatar.png" alt="">
    <h3>UI/UX</h3>
    <p>I design interfaces using Sketch and Adobe XD</p>
  </div>
</div>

如何让两个技能图像都 float :离开而不会弄乱布局？

Answer 1

制作一个 div 或一些带有类“cls”的标签(通常使用)，并给它 css: .cls {clear: both};

将带有此类的元素放在 :

之后

<p class="skill-row-sub">I develop website interface designs using frontend technologies such as HTML and CSS. Still learning Javascript and its frameworks.</p>

应该没问题。

清楚:两者都会将一个 float 与另一个分开

像这样:

    `<div class="skills">
    <h2>My Skills.</h2>
     <div class="skill-row">
         <img class="round-skill-1" src="images/tree-3097419__340.jpg" alt="">
         <h3 class="skill-row-tab-title">Frontend Development</h3>
         <p class="skill-row-sub">I develop website interface designs using frontend technologies such as HTML and CSS. Still learning Javascript and its frameworks.</p>
         <div class="cls"></div>
     </div>
     <div class="skill-row">
         <img class="round" src="images/tree-3097419__340.jpg" alt="">
         <h3>UI/UX</h3>
         <p>I design interfaces using Sketch and Adobe XD</p>

     </div>
 </div>`

CSS:

`.cls {clear: both};`