HTML CSS 清除两个问题

Question

我们怎样才能在新行中有图像而在其他行中有 h2 保持 h2 中的所有样式我们可以看到 image 和 h2 都浮动在一起我们希望两者都在不同的行请给予适当的澄清，以便所有其他程序员也参考并使用那里的代码问题很简单必须使用float和clear 属性但是不知道完美在哪里所以请检查并尽快回复我们已经多次看到这样的问题

#back-to-top {
  position: fixed;
    bottom: 20px;
    right: 20px;
}
h1, h2
{
  background-color: black;
  color: white;}
h1{
   text-align: center;
}
h2{display:inline-block;
clear: both;}
img{
  clear:both;
}

<!doctype html>
<html lang= "en">
<head>
  <meta charset= "UTF-8">
  <title>Recipe project - Module 1</title>
  </head>
  
<body>
  <h1 id = "top">My favorite Recipes: </h1>
  
 <nav> 
   <ul>
     <li><a href=#first>Panipuri</a></li>
     <li><a href=#second>Handvo</a></li>
     <li><a href=#third>Dosa</a></li>
   </ul>
 </nav>
  
  <article>
    <h2 id="first">Panipuri</h2>
 <img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
  <br>
   <br>
    <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>Kothamir Pani</li>
    <li>Dates Pani</li>
    <li>Puri</li>
    <li>Masala Ragda</li>
    </ul>
      
      <q>Have it and forget everthing</q> 
  <p><strong>Steps:</strong></p>
  <ol>
    <li>Make Masal Ragda</li>
    <li>make Kothmir pani</li>
    <li>make Dates pani</li>
    <li>take Puri and start eating</li>
    </ol></article>
    <br>
      <article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
      <br>
      <br>
      <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>1 cup rice</li>
    <li>1 cup yellow moong dal</li>
    <li>3 cups buttermilk</li>
    <li>3-4 green chillies finely chopped</li>
    <li>3 Tbsp coriander chopped</li>
      
    </ul>
       <p> Follow the step  to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
  <p><strong>Steps:</strong></p>
  <ol>
    <li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
    <li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
    <li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
    <li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
    </ol>
        </article>
      
  <article>
<h2 id="third">Dosa</h2>
    <img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
        <br>
        <br>
         <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
    <li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
    <li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
    <li>Water as needed ,Salt to taste,Oil for shallow frying</li>
    <li>3 Tbsp coriander chopped</li>
    </ul>
<p> try it  <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
  <p><strong>Steps:</strong></p>
  <ol>
    <li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
    <li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
    <li> Apply 1-teaspoon oil around the edges of dosa .</li>
    <li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
    </ol>
           </article>
      
        
        
        
 <a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>

</body>

</html>

Answer 1

我在你的 CSS 中没有看到任何 float 属性。 clear: both 仅适用于 float。您遇到的问题是因为 h2 上设置的 display:inline-block;，所以删除它，一切都应该正常工作。你不需要 clear: both:

#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

h1,
h2 {
  background-color: black;
  color: white;
}

h1 {
  text-align: center;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Recipe project - Module 1</title>
</head>
<body>
  <h1 id="top">My favorite Recipes: </h1>
  <nav>
    <ul>
      <li><a href=#first>Panipuri</a></li>
      <li><a href=#second>Handvo</a></li>
      <li><a href=#third>Dosa</a></li>
    </ul>
  </nav>
  <article>
    <h2 id="first">Panipuri</h2>
 <img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
    <br>
    <br>
    <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>Kothamir Pani</li>
      <li>Dates Pani</li>
      <li>Puri</li>
      <li>Masala Ragda</li>
    </ul>
    <q>Have it and forget everthing</q>
    <p><strong>Steps:</strong></p>
    <ol>
      <li>Make Masal Ragda</li>
      <li>make Kothmir pani</li>
      <li>make Dates pani</li>
      <li>take Puri and start eating</li>
    </ol>
  </article>
  <br>
  <article>
    <h2 id="second">Handvo</h2>
    <img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt="handvo plate" width=350 title="handvo really teasty have it">
    <br>
    <br>
    <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>1 cup rice</li>
      <li>1 cup yellow moong dal</li>
      <li>3 cups buttermilk</li>
      <li>3-4 green chillies finely chopped</li>
      <li>3 Tbsp coriander chopped</li>
    </ul>
    <p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
    <p><strong>Steps:</strong></p>
    <ol>
      <li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
      <li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
      <li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
      <li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
    </ol>
  </article>
  <article>
    <h2 id="third">Dosa</h2>
    <img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt="dosa in plate for dinner with chatni" width=350>
    <br>
    <br>
    <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
      <li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
      <li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
      <li>Water as needed ,Salt to taste,Oil for shallow frying</li>
      <li>3 Tbsp coriander chopped</li>
    </ul>
    <p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
    <p><strong>Steps:</strong></p>
    <ol>
      <li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
      <li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
      <li> Apply 1-teaspoon oil around the edges of dosa .</li>
      <li> Cook until the bottom surface turns light brown and the edges start to come upward.
      </li>
    </ol>
  </article>
  <a href=#top> <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt="back to top image" width=30></a>
</body>
</html>

Answer 2

也许你只是想改变

h2{display:inline-block;
clear: both;}
img{
  clear:both;
}

至

img{
  display:block;
}

并删除那些 <br> 标签？

Answer 3

将 width: 100%; 添加到 h2 标签

#back-to-top {
  position: fixed;
    bottom: 20px;
    right: 20px;
}
h1, h2
{
  background-color: black;
  color: white;}
h1{
   text-align: center;
}
h2{display:inline-block;
clear: both;
width: 100%;}
img{
  clear:both;
}

<!doctype html>
<html lang= "en">
<head>
  <meta charset= "UTF-8">
  <title>Recipe project - Module 1</title>
  </head>
  
<body>
  <h1 id = "top">My favorite Recipes: </h1>
  
 <nav> 
   <ul>
     <li><a href=#first>Panipuri</a></li>
     <li><a href=#second>Handvo</a></li>
     <li><a href=#third>Dosa</a></li>
   </ul>
 </nav>
  
  <article>
    <h2 id="first">Panipuri</h2>
 <img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
  <br>
   <br>
    <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>Kothamir Pani</li>
    <li>Dates Pani</li>
    <li>Puri</li>
    <li>Masala Ragda</li>
    </ul>
      
      <q>Have it and forget everthing</q> 
  <p><strong>Steps:</strong></p>
  <ol>
    <li>Make Masal Ragda</li>
    <li>make Kothmir pani</li>
    <li>make Dates pani</li>
    <li>take Puri and start eating</li>
    </ol></article>
    <br>
      <article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
      <br>
      <br>
      <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>1 cup rice</li>
    <li>1 cup yellow moong dal</li>
    <li>3 cups buttermilk</li>
    <li>3-4 green chillies finely chopped</li>
    <li>3 Tbsp coriander chopped</li>
      
    </ul>
       <p> Follow the step  to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
  <p><strong>Steps:</strong></p>
  <ol>
    <li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
    <li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
    <li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
    <li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
    </ol>
        </article>
      
  <article>
<h2 id="third">Dosa</h2>
    <img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
        <br>
        <br>
         <span><strong>List of Ingredients:</strong></span>
    <ul>
      <li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
    <li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
    <li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
    <li>Water as needed ,Salt to taste,Oil for shallow frying</li>
    <li>3 Tbsp coriander chopped</li>
    </ul>
<p> try it  <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
  <p><strong>Steps:</strong></p>
  <ol>
    <li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
    <li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
    <li> Apply 1-teaspoon oil around the edges of dosa .</li>
    <li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
    </ol>
           </article>
      
        
        
        
 <a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>

</body>

</html>

HTML CSS 清除两个问题

HTML CSS clear both issue

html

css

css-position

css-float