📜  如何仅使用浮动属性将 H2 移动到 H1 下方?

📅  最后修改于: 2021-11-10 06:03:36             🧑  作者: Mango

描述:

  • 在 Bootstrap 4 中,可以在 H1 标签下方或下方添加 H2 标签。而在使用浮动的情况下,H2 标签不能添加到 H1 标签的下方或下方,因为 H2 标签将由于引导 4 CSS 属性而移动到 H1 标签的末尾下方。
  • 为了消除这个问题,我们可以通过用具有 flex 属性的元素包装两个标签或通过使用具有类 clearfix 的元素单独包装每个标签来将 H2 移动到浮动上的 H1 下方。

示例 1:以下示例说明如何仅使用浮动将 H2 移动到 H1 下方。



  

    
    
    
    
    
    

  

    
        

GeeksforGeeks

                   H1 & H2 Without float                
            

H1 Without Float left

            

H2 Without Float left

        
           With float         
            

H1 Float left

            
            

H2 Float left

        
                      Using clearfix with float                
                   

H1 Float left

   
                   

H2 Float left

   
        
                      Wrapped by flex with float                
            

H1 Float left

            
            

H2 Float left

        
    
  

输出: