精华内容
下载资源
问答
  • 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:both属性作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动属性的元素,当做没设...

    css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动属性的元素,当做没设浮动一样来看待,以此来消除其对自己的影响

    对比设置和不设置clear:both的结果来说明

    <style>
            .test-title{
                background-color: orange;
            }
            .test-content{
                background-color: #ddd;
                height:100px;
                /* clear:both; */
            }
            .left{
                float: left;
                width: 200px;
                background-color: pink;
            }
            .right{
                float: left;
                background-color: aquamarine;
            }
        </style>
    </head>
    <body style="margin: 10px;">
        <div class="test-title">头部信息</div>
        <div class="test-container">  
            <div class="left">左侧菜单</div>
            <div class="right">右侧内容</div>
            <div  class="test-content" >we are one we are one we are one </div>
        </div>
    </body>

    为什么会出现下边的情况呢,因为左侧菜单和右侧菜单设置了float:left,此时他们属于浮动流占据了一定位置,test-content的内容属于文档流所以会紧挨着test-container上边框,

     

     

    但当我们将test-content设置clear:both后,它就会消除前边浮动给他带来的影响,也就是无视left,right样式中设置的float:left属性,把left,right看做普通文档流,因test-content是块级元素会自动换行,所以就会变成如下情况,或者设置伪元素

    .test-content::before,.test-content::after{

        content:'';

        display:block;

        clear:both;

    }

    展开全文
  • CSS中clear清除浮动属性

    千次阅读 2018-03-17 14:00:05
    1. 作用规定元素的某一侧不允许存在浮动元素。2. 应用消除其他浮动元素对其产生的影响。...5. 实际应用解决网页的“塌陷”问题(什么是塌陷:如果父级元素只包含浮动元素,那么未设置高度的同时,则父...

    1. 作用

    • 规定元素的某一侧不允许存在浮动元素。

    2. 应用

    • 消除其他浮动元素对其产生的影响。

    3. 值

    说明
    both两侧都不允许存在浮动元素
    left清除元素左侧浮动元素
    right清除元素右侧浮动元素
    none无清除效果(默认值)

    4. 原理

    • 设置了clear的元素将不像前一个浮动元素对齐,换行重新开始。

    5. 实际应用

    解决网页中的“塌陷”问题(什么是塌陷:如果父级元素只包含浮动元素,那么在未设置高度的同时,则父元素高度塌缩为零。)

    6. 解决“塌陷”的办法

    1. 创建一个用来清除浮动的CSS样式类(.clearfix)
    2. 针对包裹的全是浮动元素的父级容器使用(.clearfix)
    .clearfix{zoom:1;}
    .clearfix:after{content:".";display:block;visibility:hidden;height:0;clear:both;}

    展开全文
  • css中clear作用的复习

    2015-04-05 08:43:31
    css定义: ...以上的第三行,会和第一行排一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档 流能识别float(浮动),或者是希望floa...
    有css定义:
    p.f1{float:left;width :100px;}
    p.f2{float:left;width :400px;}

    则:
    <p class="f1">这个是第1项 </p>
    <p class="f2">这个是第2项 </p>
    <p >另起一行</p>

    以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档 流能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需要用clear:both;来清 除。

    所以我们应改为:

    如果不用清除浮动,那么第3个<P>的文字就会和第一二行在一起
    所以我们在第3个<P>加一个清除浮动。
    <p class="f1">这个是第1项 </p>
    <p class="f2">这个是第2项 </p>
    <p style="clear:both;">另起一行</p>
    展开全文
  • div+css中clear用法

    2019-10-08 12:13:24
    div+css中clear用法 一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯。 clear属性值有四个clear:both|left|right|none; 作用:该属性的值指出了不允许...
  • css中 clear:both; 的作用

    2010-05-14 15:43:53
    它的作用是清除一下之前的样式,有时候前面的一些样式影响会影响到后面的样式,所以最好每次用新样式都使用 clear:both;   clear:both; CSS手册上这样解释的:该属性的值指出了不允许有浮动对象的边。 这个...
  • CSS中clear的用法

    2016-10-09 21:38:00
    CSS中clear用法:  clear有四个属性值: clear:left;right;both;none.  作用:该属性指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流里的物理位置的。    当属性设置float(浮动)时,它的...
  • 一直认为DIV很多地方很好用,但难控制确实让人很头疼,特别是布局上,有些样式属性不知道的话根本就会乱七八糟.比如clear这个属性. 比如我们做下面这样一个页面居中布局:    由于left这个层使用了浮动,如果 ...
  • 最近学习网站div+css方面的动西,发现很多页面都有很多带有float属性的div块之后会包含一个只含clear属性的div块,但并没有什么内容,一直不得其解,网站上搜索了一下,认为以下很合情合理,一起同大家分享: ...
  • display属性:block/inline/none display:block(作用是把行属性标签显示成块属性标签,可以设置宽高) ; display:inline(作用是把块...visibility:hidden(是设置元素的框的不可见,但是布局的位置是不变的)
  • CSS的float及clear

    2019-11-13 18:33:12
    float属性在CSS布局是比较常用的,本文将带你深入理解float属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上float的实例,希望能够对你有所帮助。 float定义和用法 float:none | left | righ.....
  • div class="clear"> 这里的clear是...样式写在CSS文件从名称来看估计你的样式为:.clear {clear:both; }clear:both; 作用: 该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置
  • css入门笔记

    2018-05-15 14:58:57
    独立于任何网页位置处,声明一个样式文件(.css为后缀),文件声明样式,使用的网页引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.样式文件编写样式规则 3.网页对样式文件进行引入 <...
  • 下面这段代码是用来清除浮动带来的高度塌陷问题 ...本例,使用:before伪元素明显位于所有子元素之前,故而clear属性不会因后面的浮动元素产生任何作用效果。 clear属性的官方定义可以查看CSS文档 。那么应
  • 实际的开发过程很多情况下父级盒子不方便给高度,但是子级元素...清除浮动主要是通过 CSSclear 属性,常用的属性值如下: 属性作用 left 左侧不允许浮动元素(清除左侧浮动的影响) right ...
  • <div class="clear"></div>

    2018-08-20 14:22:00
    样式写在CSS文件 从名称来看估计你的样式为:.clear {clear:both; } clear:both; 作用:该属性的值指出了不允许有浮动对象的边。 这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float...
  • clear属性是如何工作的,并且它的作用是什么?即使是经验丰富的开发者也会浮动上出错,所以理解浮动的行为能帮你摆脱面对CSS的很多困扰。即使你认为你已经了解了关于浮动的所有知识,我们也会深入到你可能会学习到...
  • 设置了弹性盒模型后,float,clear盒vertical-alignflex不起作用。 父容器常用属性 display:flex 定义一个flex容器 设置父元素是一个弹性盒,子元素会自动水平排列。 justify-content:flex-end; ...
  • css布局之弹性布局flex

    2019-10-24 13:54:36
    1. 弹性布局作用 作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将...父容器的子元素都会成为行内块,默认所有子元素横向排列,子元素的float、clear和vertical-align属性将失效。但是position...
  • CSS网站布局实录 (第二版)PDF版

    热门讨论 2012-12-10 18:46:01
    1.5.2 发挥CSS 2.0的作用 1.6 常见问题 1.6.1 什么样的网站才符合Web标准 1.6.2 使用Web标准之后表格还有用吗 1.6.3 可以继续使用HTML来设计网页吗 1.6.4 为什么不直接使用到XML 1.6.5 学习CSS布局比表格困难吗 ...
  • web网站开发,有时候我们给html元素设置的margin-top或margin-bottom属性,但是无效,并没有取到任何作用,这是什么原因呢?常出现两种情况: 一、兄弟元素之间margin-top失效 先看下面代码: <div>...

空空如也

空空如也

1 2
收藏数 39
精华内容 15
关键字:

在css中clear属性作用是