📜  基础 CSS 浮动左/右类

📅  最后修改于: 2022-05-13 01:56:14.464000             🧑  作者: Mango

基础 CSS 浮动左/右类

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架,可以轻松设计美观的响应式网站、应用程序和电子邮件,这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用,例如 Facebook、eBay、Mozilla、Adobe,甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI,因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具,用于在移动设备上更快地呈现。

Foundation CSS 中, Float 类从页面的正常流程中移除元素,并将其放置在其父元素的特定一侧。

基础 CSS 浮动左/右类:

  • float-left:该类将元素从网页的正常流程中移除,使其浮动在容器的内部左侧。
  • float-right:该类将元素从网页的正常流程中移除,并使其浮动在容器的内部右侧。
  • clearfix:如果我们在父元素中添加浮动,这个类会移除它。

句法:

...

示例 1:下面是说明使用float-left类的示例。

HTML


  

      Float Left/Right classes
  
    
  
    
  
    
      

  

  
    

        GeeksforGeeks     

       

Foundation CSS Float Left/Right

          
  


HTML


  

    Float Left/Right classes
  
    
  
    
  
    
      

  

  
    

        GeeksforGeeks     

       

Foundation CSS Float Left/Right

          
  


输出:

示例 2:下面是说明使用float-right类的示例。

HTML



  

    Float Left/Right classes
  
    
  
    
  
    
      

  

  
    

        GeeksforGeeks     

       

Foundation CSS Float Left/Right

          
  

输出:

参考: https://get.foundation/sites/docs/float-classes.html#float-left-right