精华内容
下载资源
问答
  • css中clear作用是什么?

    千次阅读 2020-09-24 18:33:04
    clear : none | left | right | both. 对于CSS的清除浮动(clear...2,在css中给父级添加属性:overflow:hidden;(我比较喜欢这个) 3,伪元素清除法, 4,建立空的div,命名为clear在css中添加clear:both; ...

    clear : none | left | right | both.

    对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素。

     

     

    清除浮动方法

    1,给父级元素添加class=“clearflex”

    2,在css中给父级添加属性:overflow:hidden;(我比较喜欢这个)

    3,伪元素清除法,

    4,建立空的div,命名为clear,在css中添加clear:both;

    展开全文
  • 本文介绍css中clear属性使用方法,大家参考使用吧
  • 一、理解clear: left/clear: right 当想到clear: left的时候,自然会认为是“清除左浮动”,clear: right是清除右浮动。 其实现在想想,这样的理解与表示是不严谨的欠考虑的。 一般,现在中文圈流传的表述是:  ...
  • CSS clear 属性取值详解

    千次阅读 2021-06-06 00:15:47
    现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作开发问题总结 相关的内容; 不积跬步,无以至千里, 一时得失莫要在意 。 好了废话不多说, ...

    之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步,无以至千里, 一时得失莫要在意 。

    好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

    1.clear 属性定义:
    1. clear 属性规定元素的哪一侧不允许其他浮动元素 。
    
    2. clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
    
    
    2.clear 属性值
    1. clear: none -- 允许浮动元素 (默认值)2. clear: left -- 在左侧不允许浮动元素 。
    	 1. clear:left 的含义是如果当前元素的左侧有浮动元素,那么就强制该元素另起一行 。
       
    3. clear: right -- 在右侧不允许浮动元素 。
    	 1. clear:right 的含义是如果当前元素的右侧有浮动元素,那么就强制该元素另起一行 。
       
    4. clear: both -- 在左右侧均不允许浮动元素 。
    
    5. clear: inherit -- 从父元素继承 clear 属性 。
    
    3为什么会有浮动
    1. 在我们页面正常显示的排版布局中, 元素可分为块级元素与行内元素;
    
    2. 在标准文档流中块级元素会独占一行, 行内元素会从左至右依次铺展开;
    
    3. 这样的设置在我们实际开发中是不能完全满足我们设计需求的, 因此就有了浮动这样的设置 。
    
    4. 浮动元素会脱离原有的文档流, 也就是标准文档流; 通俗来讲就是不在一个层级上 。
    
    4. clear生效总结
    1. 设置 clear 属性时, 只对当前浮动元素生效, 对于其他的元素标签没有效果 。
    
    2. 例如: 页面中有两个 div , 同时设置 float: left, 当我们对第一个元素设置 clear: riaght 时, 并不能使第二个元素排列在第二行
    
    代码示例:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS clear 属性取值详解</title>
    </head>
    <style>
    .w_clear-shel {
      background-color: yellow;
      overflow: hidden;
    }
    ul li {
      list-style: none;
    }
    
    /* 验证 clear 生效规则 */
    .w_take-situation {
      width: 200px;
      height: 200px;
      background-color: darkgoldenrod;
      float: left;
      margin: 20px;
    }
    .w_f-s-1 {
      /* 设置没有生效 */
     clear: right;
    }
    .w_f-s-2 {
      /* 设置生效代码 */
      clear: left;
    }
    
    </style>
    
    <body>
      <div class="w_clear-shel">
        <div class="w_take-situation w_f-s-1">1</div>
        <div class="w_take-situation w_f-s-2">2</div>
      </div>
    </body>
    </html>
    
    图片示例:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    5. clear: none 属性代码及效果图片展示
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS clear 属性取值详解</title>
    </head>
    <style>
    .w_clear-shel {
      background-color: aliceblue;
    }
    ul li {
      list-style: none;
    }
    /* clear: none */
    .w_clear-none {
      background-color: burlywood;
    }
    .w_c-n-item {
      width: 160px;
      height: 120px;
      background-color: cadetblue;
      margin: 8px 4px;
      text-align: center;
      line-height: 120px;
    }
    .w_c-n-item-4 {
      /* 在此处我们可以分别注释 float 设置, 来查看图例中的效果 */
      /* float: left; */
      float: right;
      clear: none;
    }
    .w_c-n-item-5 {
      background-color: yellow;
      /* height: 150px; */
      /* width: 200px; */
    }
    </style>
    
    <body>
      <div class="w_clear-shel">
        <!-- clear: none -->
        <ul class="w_clear-none">
          <li class="w_c-n-item">1</li>
          <li class="w_c-n-item">2</li>
          <li class="w_c-n-item">3</li>
          <li class="w_c-n-item w_c-n-item-4">4</li>
          <li class="w_c-n-item w_c-n-item-5">测试当前内容显示</li>
        </ul>
      </div>
    </body>
    </html>
    
    图片展示:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    6. clear: left 属性代码及效果图片展示
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS clear 属性取值详解</title>
    </head>
    <style>
    .w_clear-shel {
      background-color: yellow;
    }
    ul li {
      list-style: none;
    }
    
    /* clear: left */
    .w_clear-left {
      background-color: turquoise;
      margin: 30px 0;
      width: 1200px;
    }
    .w_c-l-item {
      width: 160px;
      height: 120px;
      background-color: rosybrown;
      margin: 8px 4px;
      text-align: center;
      line-height: 120px;
      /* 图例的各种效果可以通过下面的代码, 设置来查看 */
      /* float: left; */
      /* clear: left; */
    }
    .w_c-l-item-4 {
      /* 图例的各种效果可以通过下面的代码, 设置来查看 */
      float: left;
      clear: left;
    }
    
    </style>
    
    <body>
      <div class="w_clear-shel">
        <!-- clear: left -->
        <ul class="w_clear-left">
          <li class="w_c-l-item">1</li>
          <li class="w_c-l-item">2</li>
          <li class="w_c-l-item">3</li>
          <li class="w_c-l-item w_c-l-item-4">4</li>
          <!-- <li class="w_c-l-item">5</li> -->
        </ul>
      </div>
    </body>
    </html>
    
    图片展示:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    7. clear: right 属性代码及效果图片展示
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS clear 属性取值详解</title>
    </head>
    <style>
    .w_clear-shel {
      background-color: yellow;
    }
    ul li {
      list-style: none;
    }
      
    /* clear: right */
    .w_clear-right {
      background-color: turquoise;
      margin: 30px 0;
      width: 1200px;
    }
    .w_c-r-item {
      width: 160px;
      height: 120px;
      background-color: rebeccapurple;
      margin: 8px 4px;
      text-align: center;
      line-height: 120px;
    
      /* float: right; */
    }
    .w_c-r-item-4 {
      float: right;
      clear: right;
    }
    .w_c-r-item-5 {
      float: right;
    }
    
    </style>
    
    <body>
      <div class="w_clear-shel">
        <!-- clear: right -->
        <ul class="w_clear-right">
          <li class="w_c-r-item">1</li>
          <li class="w_c-r-item">2</li>
          <li class="w_c-r-item">3</li>
          <li class="w_c-r-item w_c-r-item-4">4</li>
          <li class="w_c-r-item w_c-r-item-5">5</li>
        </ul>
      </div>
    </body>
    </html>
    
    图片展示:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    8. clear: both 属性代码及效果图片展示
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS clear 属性取值详解</title>
    </head>
    <style>
    .w_clear-shel {
      background-color: yellow;
    }
    ul li {
      list-style: none;
    }
    
    /* clear: both */
    .w_clear-both {
      background-color: crimson;
      margin: 30px 0;
      width: 1200px;
    }
    .w_c-b-item {
      width: 160px;
      height: 120px;
      background-color: lightseagreen;
      margin: 8px 4px;
      text-align: center;
      line-height: 120px;
    
      /* float: left; */
    }
    .w_c-b-item-3 {
      float: right;
      /* float: left; */
      clear: both;
    }
    .w_c-b-item-4 {
      /* float: right; */
      float: left;
      clear: both;
    }
    .w_c-b-item-5 {
      float: right;
      clear: both;
    }
    
    /* clear: inherit */
    
    </style>
    
    <body>
      <div class="w_clear-shel">
        <!-- clear: both -->
        <ul class="w_clear-both">
          <li class="w_c-b-item">1</li>
          <li class="w_c-b-item">2</li>
          <li class="w_c-b-item w_c-b-item-3">3</li>
          <li class="w_c-b-item w_c-b-item-4">4</li>
          <li class="w_c-b-item w_c-b-item-5">5</li>
        </ul>
      </div>
    </body>
    </html>
    
    图片展示:

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    如果对你有所帮助,希望大家喜欢点个关注;整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教,本人会及时更改 (本文原创, 如需转载,请注明出处) 。

    展开全文
  • css clear属性 CSS | 清除财产 (CSS | clear Property) We know so much about float property and how it is used for styling our web pages. If you do not remember the float property, let's help jog your ...

    css clear属性

    CSS | 清除财产 (CSS | clear Property)

    We know so much about float property and how it is used for styling our web pages. If you do not remember the float property, let's help jog your memory. The float property is used to set the elements in a particular section of the web page. For e.g, if you set the property for an element as float:right; then that particular element will float to the right side of the page. But what about the time when we do not want that element to float in that part of the page?

    我们对float属性及其如何用于设置网页样式非常了解。 如果您不记得float属性,让我们来帮助您记忆一下。 float属性用于设置网页特定部分中的元素。 例如,如果您将元素的属性设置为float:right; 那么该特定元素将浮动到页面的右侧。 但是,当我们不希望该元素在页面的该部分中浮动时该怎么办?

    That is where clear property comes in.

    那就是清除财产的地方。

    The clear property is a very basic and easy property to apply. It is used to specify on which side of the page the floating elements should not float basically to clear that section of the page of the floating elements.

    clear属性是一个非常基本且易于应用的属性。 它用于指定浮动元素基本上不应浮动在页面的哪一侧,以清除浮动元素页面的该部分。

    By using clear property it will be ensured that the element on which clear property is applied will not float to the specified area of the page. This property comes in handy very often when we do not want our elements to float either side of the web page.

    通过使用clear属性 ,将确保应用了clear属性的元素不会浮动到页面的指定区域。 当我们不希望元素在网页的任何一侧浮动时,此属性通常会派上用场。

    Implication

    意义

    To use the clear property not many lines of code are required all you gotta do is specify the side or section of the page where you do not want your floating elements to float.

    要使用clear属性,不需要很多代码行,您要做的就是指定页面中您不希望浮动元素浮动的一侧或部分。

    This could be understood clearly with the help of the following example:

    通过以下示例可以清楚地理解这一点:

    For e.g: if you do not want your elements to float on either side of the page(left or right), you must use this property as:

    例如:如果您不希望元素在页面的任一侧(左或右)浮动,则必须将此属性用作:

    Syntax:

    句法:

    Element {
        clear: both;
    }
    
    

    Note that to not allow floating elements to float on either side of the page, only both attribute was enough we did not use "right and wrong", which makes it quite shorthand too.

    请注意,为了不让浮动元素浮动在页面的任何一侧,仅两个属性就足够了,我们没有使用“对与错” ,这也使其非常简写。

    However, if you wish to restrict your floating elements from floating on a particular side of the page, for example, right then you will have to specify right as an attribute.

    但是,例如,如果您希望限制浮动元素不浮动在页面的特定一侧,则必须将right指定为属性。

    Example:

    例:

    <!DOCTYPE html>
    <html>
    
    <head>
        <style>
            img {
                float: left;
            }
            
            p.clear {
                clear: both;
            }
        </style>
    </head>
    
    <body>
        <h1>clear property in CSS</h1>
        <img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" width="140" height="142">
        <p>this is a clear property example..this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example</p>
        <p class="clear">this is a clear property example..this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example.this is a clear property example</p>
    </body>
    
    </html>
    
    

    Output

    输出量

    clear Property in CSS | Example 1

    In the above example, remove the clear class to see the effect.

    在上面的示例中,删除clear类以查看效果。

    Key points:

    关键点:

    Let us understand clear property more,

    让我们更多地了解清晰的属性

    The default value of the clear property is none. This means if you write none immediately after clear then no changes will be done to the floating elements.

    clear属性的默认值为none 。 这意味着,如果在清除后立即不写任何内容,则不会对浮动元素进行任何更改。

    To use this property in JavaScript, the syntax is different and it goes like this,

    要在JavaScript中使用此属性,语法会有所不同,就像这样,

    object.style.clear="both"
    
    

    Below is a table that would explain the values of clear property in a much better way,

    下面的表格将以更好的方式说明clear属性的值,

    Property values:

    属性值:

    ValueDescription
    noneA default value. It allows floating elements on either sides
    leftThis does not allow floating elements on the left side.
    rightThis does not allow floating elements on the right side.
    bothThis does not allow floating elements on either side.
    initialThis would set the property to its default value.
    inheritThis helps in inheriting property from its parent element.
    描述
    没有 默认值。 它允许在两侧浮动元素
    剩下 这不允许左侧有浮动元素。
    这不允许在右侧浮动元素。
    这不允许任一侧都有浮动元素。
    初始 这会将属性设置为其默认值。
    继承 这有助于从其父元素继承属性。

    翻译自: https://www.includehelp.com/code-snippets/clear-property-in-css.aspx

    css clear属性

    展开全文
  • 什么是CSS清除浮动? 网络上流行的说法是:非IE浏览器(如Firefox)下,当容器的高度(height)为auto,且容器的内容有浮动(float为left...clear 属性CSS 1 就提供的用来清除浮动的样式,设置了 clear 属性的元
  • CSS 清理浮动 clear属性

    千次阅读 2018-02-21 22:09:50
    清理虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。首先,看看父元素的高度塌陷。假设有一个容器,其中两个子元素,一个子...

    虽然浮动可以便于页面布局,但同时会产生一些问题,也就是常说的副作用。浮动元素最常见的缺陷是:父元素的高度塌陷和影响兄弟元素的位置。

    首先,看看父元素的高度塌陷。假设有一个容器,其中两个子元素,一个子元素向左浮动,一个子元素向右浮动。代码如下:

    
    
    1. .wrapper {
    2.     border: 2px dashed #ccc;
    3. }
    4. .wrapper > div {
    5.     width: 80px;
    6.     height: 60px;
    7.     border: 1px dashed #444;
    8. }
    9. .floatL {
    10.     float: left;
    11. }
    12. .floatR {
    13.     float: right;
    14. }
    
    
    1. <div class = "wrapper">
    2. <div class = "floatL">box1 </div>
    3. <div class = "floatR">box2 </div>
    4. </div>

    上述容器 wrapper 的高度为auto,且只包含浮动元素。由于浮动元素脱离了文档流,因此,容器 wrapper 就相当于一个空标签,其高度就会塌陷为零,使得浮动元素溢出到容器外面。如图 5‑29 所示:

    浮动导致容器高度塌陷图5-29 浮动导致容器高度塌陷

    这种塌陷会影响、甚至破坏布局,如果父元素没有边框,也不包含任何可见背景,这个问题就很难被注意到,但它却是一个很重要的问题。

    再来看看浮动元素如何影响兄弟元素的位置。当容器的高度为 auto,且只包含浮动元素时,如果浮动元素的高度不相同,而剩余空间足够容纳后面的元素时,后面的元素就会上跳到剩余的空间。代码如下:

    
    
    1. .wrapper {
    2.     border: 2px dashed #ccc;
    3. }
    4. main {
    5.     float: left;
    6. }
    7. aside {
    8.     float: right;
    9. }
    10. footer {
    11.     float: left;
    12. }
    
    
    1. <div class = "wraper">
    2. <main>main</main>
    3. <aside>aside</aside>
    4. <footer>footer</footer>
    5. </div>

    上述的布局为两栏布局,主栏向左浮动,侧栏向右浮动,并且侧栏的高度小于主栏的高度。页脚便会上跳到侧栏的剩余空间。如图 5‑30 所示:

    浮动使相邻元素上跳图5-30 浮动使相邻元素上跳

    很显然,无论是高度塌陷,还是影响兄弟元素的位置,都不是使用浮动的目的。浮动只是为了改变元素的布局,却造成了不必要的影响。因此,需要清除浮动带来的影响。

    CSS中,把清除浮动影响所进行的处理,叫做清理浮动(或清除浮动)。一般有两种处理思路:使用 clear属性和让容器创建一个BFC。

    每种思路中都包含多种方法,但并不是每一种方法都尽善尽美,接下来简单介绍这些方法的原理及适用场合,可以根据实际情况,选择合适的方法。

    使用 clear属性

    CSS中的 clear属性,用来规定在元素的哪一侧不允许出现浮动元素,可选值有 none | left | right | both,默认值为 none,表示不清除,左右两侧均允许出现浮动元素。left 表示清除左侧,在左侧不允许出现浮动元素;right 表示清除右侧,在右侧不允许出现浮动元素;both 表示清除两侧,左右两侧均不允许出现浮动元素。

    1)使用带clear属性的空元素

    这也是W3C推荐使用的方法,首先在CSS中定义一个清理的 class,然后在浮动元素的后面,使用一个空元素 <div class = "clear"></div> 或 <br class = "clear" />。如:

    
    
    1. .clear {
    2.     clear: both;
    3. }
    
    
    1. <div class = "wraper">
    2. <div class = "floatL">box1 </div>
    3. <div class = "floatR">box2 </div>
    4. <br class = "clear" />
    5. </div>

    这种方法的优点是简单、代码少、浏览器兼容性好。但是,需要添加无语义的html元素,违背了表现和内容相分离的原则,代码不够优雅,增加了后期维护的难度。

    2)借用邻接元素处理

    什么都不做,给浮动元素后面的那个元素添加 clear属性。假如在浮动元素后面有一个 p 元素,可以为 p 元素添加 clear属性,来间接清除浮动。如:

    
    
    1. <div class = "wraper">
    2. <div class = "floatL">box1 </div>
    3. <div class = "floatR">box2 </div>
    4. <p class = "clear"></p>
    5. </div>

    如果你很明确的知道接下来的元素是什么,这个方法很不错,它不需要 hack,不添加额外的元素。但是,使用这种方法,必须确保浮动元素后面确实有元素。如果没有元素,巧妇难为无米之炊,也没有办法。

    3)使用CSS的 :after 伪元素

    结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和触发布局的 IE hack,可以完美兼容当前各大主流浏览器。

    给包含浮动元素的容器添加一个 clearfix 的 class,然后给这个 class 添加一个 :after 伪元素,在元素末尾添加一个看不见的块元素,让这个块元素来清除浮动。

    
    
    1. .clearfix:after {
    2.     content: ".";
    3.     clear: both;
    4.     display: block;
    5.     height: 0;
    6.     visibility: hidden;
    7. }
    
    
    1. <div class = "wrapper clearfix">
    2. <div class = "floatL">box1 </div>
    3. <div class = "floatR">box2 </div>
    4. </div>

    通过CSS伪元素,在容器的末尾,插入一个点 ".",然后通过 height 和 visbility 属性使其不可见,再为插入的点设置 clear属性来清除浮动,其原理跟上述两种方法类似。

    事实上,上述方法插入任何内容,都可以清除浮动。当然,如果插入一个空格的话,就不必设置 height 和 visbility 属性,代码会跟简洁。如:

    
    
    1. .clearfix:after {
    2.     content: "";
    3.     clear: both;
    4.     display: block;
    5. }

    需要注意的是,由于IE7及以下的版本不支持 :after 伪元素,因此还需要为 .clearfix 设置width、或 height、或 zoom 等一系列属性,来触发布局(即,使IE私有属性 hasLayout 的值为 true)。如:

    
    
    1. .clearfix {
    2.     *zoom: 1;
    3. }

    在这些属性值中,zoom 用于设置元素的缩放比例,取值 1 就会使用元素的实际尺寸。因此,使用 zoom: 1 既可以触发布局,又不会对元素造成其他影响,相对而言比较安全。

    让容器创建BFC

    可以利用BFC特性,来清除浮动。准确的讲,说清除浮动不太合适,应该说是让容器创建一个BFC,来包含浮动元素。可以为容器设置以下属性,来创建一个新的BFC,间接实现清除浮动的效果:

    • float: left | right
    • position: absolute | fixed
    • overflow: hidden | auto | scroll
    • display: inline-block | table-cell | table | flex | inline-flex

    虽然设置上述属性都可以创建BFC,实现清除浮动的效果,但是,float、position、display 属性可能会影响整体布局。因此,最常用的还是设置 overflow 属性。

    1)让容器浮动

    让容器浮动后,容器就会创建一个新的BFC,使它可以包含浮动元素。计算BFC的高度时,浮动子元素也参与计算。因此,容器的高度就表现正常,其他框的位置也就正常了。

    
    
    1. .wrapper {
    2.     float: left;
    3.     border: 2px dashed #ccc;
    4. }

    让容器浮动后,容器的高度确实没有塌陷,但是,容器的宽度可能会发生变化,因为浮动元素的宽度是有其内容决定的(显式设置 width 属性者除外),这可能会影响整体布局。

    2)为容器添加 position 属性

    如果为容器设置 position: absolute 或 position: fixed,容器就会创建一个新的BFC,使它可以包含浮动元素。

    
    
    1. .wrapper {
    2.     position: absolute;
    3.     border: 2px dashed #ccc;
    4. }

    另外,由于IE7及以下的版本不支持BFC,还需要触发布局。设置 position: absolute,IE6和IE7都可以触发布局。但是,IE6不支持 position: fixed,还需要为容器设置 zoom: 1,来触发布局。

    3)为容器添加 overflow 属性

    如果为容器设置 overflow: hidden 或 overflow: auto,容器就会创建一个新的BFC,使它可以包含浮动元素。

    
    
    1. .wrapper {
    2.     overflow: hidden;
    3.     border: 2px dashed #ccc;
    4. }

    另外,由于IE7及以下的版本不支持BFC,还需要触发布局。在IE7中,把 overflow属性设置为 visible 之外的值,就可以触发布局,IE6则不行。因此,在IE6中,可以为容器设置 zoom: 1,来触发布局。

    这个方法不需要额外元素,有着较好的语义性,也比较简单。但是,需要要记住,overflow 属性不是为清除浮动而定义的,注意不要隐藏了不该隐藏的内容或触发了不必要的滚动条。

    说明:BFC 与 hasLayout

    从表现上来说,hasLayout 跟 BFC 的功能很相似,只是 hasLayout 自身存在很多问题,导致了 IE6-7 中的一系列 bug。

    既然 hasLayout 有着跟 BFC 相似的功能,而 IE7 及以下的版本不支持 BFC。因此,为了避免不同浏览器下的表现差异,在实际开发中,需要创建 BFC 的元素,同时也要触发 hasLayout。

    事实上,在实际开发中,很多莫名其妙的问题,都是由此产生的。当然同样地,如果一个元素没有创建 BFC,也要尽量保证它没有触发 hasLayout 。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

    展开全文
  • css clear属性 的深入了解

    千次阅读 2018-07-07 20:42:33
    css clear属性深入了解: 一、什么是 CSS clear清除浮动? 元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本...
  • 使用clear属性清除浮动是司空见惯的事情,使用clear:left早已烂熟于胸;但是使用clear:right属性的时候未必奏效了,本文将针对这个问题详细探讨下,感兴趣的朋友可以了解下,希望对你有所帮助
  • css中clear属性

    千次阅读 2018-07-11 23:12:00
    因为复习布局嘛,用到了float属性,有时候希望让元素强制换行,就得用到clear属性。     但是,让我懵逼的是,clear-left和clear-right和clear-both属性到底怎么用的啊,看了一些资料更懵逼了!   所以决定...
  • float:left; 当前元素向左侧浮动;float:right: 当前元素向右侧浮动,而clear可以清除浮动,让当前元素将浮动元素下面另起一行呈现,不知道的朋友可以参考下
  • css中clear:both属性的理解及用法

    千次阅读 2020-05-18 11:40:04
    css中clear:both属性作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素设有浮动属性的元素,当做没设...
  • CSS中clear清除浮动属性

    千次阅读 2018-03-17 14:00:05
    1. 作用规定元素的某一侧不允许存在浮动元素。2. 应用消除其他浮动元素对其产生的影响。...5. 实际应用解决网页的“塌陷”问题(什么是塌陷:如果父级元素只包含浮动元素,那么未设置高度的同时,则父...
  • 关于clear属性的定义参考:W3School 阅读W3School相关内容时一定要认真,认真,仔细,仔细阅读“说明”部分:“如果声明为左边或右边清除,会使元素的上外边框边界刚好该边上浮动元素的下外边距边界之下”。...
  • CSS中clear属性

    万次阅读 多人点赞 2014-04-14 08:45:54
    首先要知道,div是块级元素,页面独占一行,自上而下排列,也就是传说的流。如下图:        可以看出,即使div1的宽度很小,页面一行可以容下div1和div2,div2也不会排div1后边,因为div...
  • 主要介绍了css的border和clear属性使用方法和示例,需要的朋友可以参考下
  • 本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局...
  • CSS3 深入理解clear属性

    2019-04-29 20:31:23
    clear属性作用就是“清除”浮动。如果某元素设置clear:left;表示该元素左边不存在浮动元素相应的, clear:right;表示该元素右边不存在浮动元素;clear:both;表示该元素两边都不存浮动元素。clear:none表示两边...
  • CSS的float属性作用就是改变块元素对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,从而可以实现多个元素同处一行的效果。Float的功能很强大,但是如果没有好好掌握而使用很可能会成为你...
  • 最近学习微信小程序,设计首页布局的时候,新认识了一种布局方式display:flex .container { display: flex; flex-direction: column;...设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
  • 深入理解CSS清除浮动与clear属性 相信作为一名前端工作人员,一定遇到过或是被问过清除浮动这一问题,一般我们会说:元素添加float属性后,其父元素不会被撑开,解决这个问题的过程就称为清除浮动。没有问题,假如再...
  • clear的值有四个 none:允许两边都可以有浮动对象; both:不允许有浮动对象; left:不允许左边有浮动对象; right:不允许右边有浮动对象。 老实说,我没真正理解字面上的意思,因为这几段话是有歧义的,例如...
  • 就是有时令人书写这五个属性的顺序上有些困扰。下面一段代码取自搜狐: 复制代码代码如下: .bBot{background:url(../images20130624/bg.png) no-repeat -1424px -5px;overflow:hidden;height:1px;clear:both;font...
  • 1.CSS浮动 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。 Float(浮动),往往是用于图像,但它布局时一样非常有用。... 1.2 clear属性(清除元素浮动) 值 描述
  • cssclear属性

    千次阅读 2013-08-16 12:45:30
    clear属性用来设置元素左右两边是否可以存在浮动元素。 它的值包括:left,right,both,none。其中none代表左右两边可以出现浮动元素。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,790
精华内容 28,316
关键字:

在css中clear属性作用是