您的当前位置:首页html清除浮动后样式依旧错误。。怎么破,求解_html/css_WEB-ITnose
广告

html清除浮动后样式依旧错误。。怎么破,求解_html/css_WEB-ITnose

2023-11-27 来源:热乐宠物网
html代码如下:
  • 夜空中最亮的星 |
  • 送别 |
  • 没有什么不同 |
  • tup1
  • tup2
  • tup3
  • tup4
  • tup5
  • tup6
  • tup7
  • tup10
  • tup15
  • css样式代码如下: .right{ float:right; } .right .top{ width:750px; height:60px; line-height:60px; border:2px solid #F66; margin-bottom:15px; } .top ul{ padding-left:15px; } .top ul li{ float:left; width:240px; margin-bottom:15px; border:1px solid #3CC; } .right .bott{ width:750px; border:2px dashed #F3C; padding-top:20px; } .bott ul{ margin-bottom:20px; } .bott ul li{ float:left; margin-bottom:20px; margin-left:20px; height:220px; width:220px; } .bott ul li img{ width:220px; height:220px; } .footer{ margin:auto 30px; background:#3F6; } .clearfix:after{ content"."; display:block; height:0px; clear:both; visibility:hidden; 显示的结果是我右边部分的框压根就没有框住所有的li。。图片传不上。郁闷

    回复讨论(解决方案)

    图片如下。红色的部分是我right部分的边框,本来是要套住所有li的哪个图片的。

    我觉得应该是清除浮动的关系,可是我都清浮动了,,为什么还是没有效果呢。坐等解决啊

    无标题文档 
  • 夜空中最亮的星 |
  • 送别 |
  • 没有什么不同 |
  • tup1
  • tup2
  • tup3
  • tup4
  • tup5
  • tup6
  • tup7
  • tup10
  • tup15
  • 无标题文档 
  • 夜空中最亮的星 |
  • 送别 |
  • 没有什么不同 |
  • tup1
  • tup2
  • tup3
  • tup4
  • tup5
  • tup6
  • tup7
  • tup10
  • tup15
  • 我粘贴楼主的代码,显示了li都在right的边框里。。仔细看了下代码,没有发现有什么大的变动啊,求赐教。。

    你装个代码比较软件看一看,我改动的css挺多的,删除了元素上的clearfix

    你装个代码比较软件看一看,我改动的css挺多的,删除了元素上的clearfix 我试试。能说下你发现我这代码的主要问题是哪些呢。clearfix用的地方不对吗

    你装个代码比较软件看一看,我改动的css挺多的,删除了元素上的clearfix 我试试。能说下你发现我这代码的主要问题是哪些呢。clearfix用的地方不对吗 不要在ul,上用margin,padding

  • tup1
  • tup2
  • tup3
  • tup4
  • tup5
  • tup6
  • tup7
  • tup10
  • tup15
  • 何时用clear:看一看这篇: CSS浮动属性Float详解

    何时用clear:看一看这篇: CSS浮动属性Float详解 3q,我去认真看下。

  • tup1
  • tup2
  • tup3
  • tup4
  • tup5
  • tup6
  • tup7
  • tup10
  • tup15
  • 这个我也试过的,没改变。

    当你想子盒子浮动时,最好也设置父盒子浮动,让它们在同一层次上,,父盒子的大小才会跟着改变,

    .clearfix:after{ content"."; display:block; height:0px; clear:both; visibility:hidden; 是你贴的不全呢,还是你写的就这样 针对这个说两点 一没有关的 } 二 你的content 这块写的不对 content:"."; 我试了下就没问题了,你可以再试试, 代码 就是你的

    是没有:个号 你的是什么编辑器呀这样低级的 错误都不高亮一下

    是没有:个号 你的是什么编辑器呀这样低级的 错误都不高亮一下 是我粗心了。我用的是dreamweaver啊

    当你想子盒子浮动时,最好也设置父盒子浮动,让它们在同一层次上,,父盒子的大小才会跟着改变, 很有道理啊。。学了一招,非常感谢

    小编还为您整理了以下内容,可能对您也有帮助:

    在HTML5 CSS3中,请简述一下清除浮动的三种方法以及各自的优缺点?

    1、使用clear:both清除浮动
    在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。
    优点:简单,方便兼容性好
    缺点:因为会造成结构混乱,不利于后期维护
    建议:一般情况下不建议使用该方法

    2、利用伪元素clearfix来清除浮动
    给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
    .clearfix:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
    }
    .clearfix { zoom: 1; }
    原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题
    优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
    缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
    建议:推荐使用,建议定义在公共类,以减少css代码

    3、父级div定义overflow方法
    当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。
    .parent-container {
    /* other style... */
    overflow: hidden;
    }
    原理:它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果。
    优点:简单,代码少,浏览器支持好
    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
    建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

    4、双伪元素方法的使用
    通过给父元素设置双伪元素来达到清除浮动的效果,即添加:before和:after伪元素。
    .clearfix:before,.clearfix:after {
    content: "";
    display: block;
    clear: both;
    }
    与方法2相同

    在HTML5 CSS3中,请简述一下清除浮动的三种方法以及各自的优缺点?

    1、使用clear:both清除浮动
    在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。
    优点:简单,方便兼容性好
    缺点:因为会造成结构混乱,不利于后期维护
    建议:一般情况下不建议使用该方法

    2、利用伪元素clearfix来清除浮动
    给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
    .clearfix:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
    }
    .clearfix { zoom: 1; }
    原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题
    优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
    缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
    建议:推荐使用,建议定义在公共类,以减少css代码

    3、父级div定义overflow方法
    当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。
    .parent-container {
    /* other style... */
    overflow: hidden;
    }
    原理:它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果。
    优点:简单,代码少,浏览器支持好
    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
    建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

    4、双伪元素方法的使用
    通过给父元素设置双伪元素来达到清除浮动的效果,即添加:before和:after伪元素。
    .clearfix:before,.clearfix:after {
    content: "";
    display: block;
    clear: both;
    }
    与方法2相同

    htmL css 如果视窗缩小,页面样式就错乱这个怎么解决?

    htmL css 如果视窗缩小,页面样式就错乱这个怎么解决?

    如果视窗缩小,页面样式错乱就要对每个元素设定长宽、浮动、定位保证每个元素唯一。

    HTML中引入CSS样式的形式:

    1、正常引入
    <link href="/build/wele.css" rel="stylesheet">。

    2、按需引入
    在需要的时候通过js引入。

    有两种思路
    1.设定最外层的div宽度为固定值,,950,,960,其它内容都放里面
    2.设定div的最小宽度

    淘宝登入页面错乱怎么解决

      首先你是不是同时登入了几个旺旺号,然后你的系统可能出现了混乱,你先全部退出,然后清理浏览器,然后再重新登入旺旺号。就可以了

    为什么缩小视窗页面布局就乱了

    看下的你的程式码是怎么写的,是不是每个的容器的位置都是固定的,还有容器的大小是百分比还是常量。因为看不到程式码具体原因无法分析,只能是猜测其可能造成这种现象的原因

    重新整理子视窗时,父视窗丢失样式,反之重新整理父视窗时子视窗样式丢失。两个页面呼叫了一个公共CSS。

    没遇到过这样的问题,感觉像是浏览器的bug,建议尝试将css分开,或者同时重新整理两个页面试试

    ie8页面错乱解决方案

    错位的请点选相容模式。

    为什么我把两个CSS样式表放到一起样式就错乱了

    因为有相同的类标签,比如样式a里面有.one{color:red},样式B里面也有.one { color:bule}

    页面乱码怎么解决

    乱码问题发生于编码方式不统一造成的,我来说一下我遇到乱码时的查询过程1,看看专案的编码方式是否是UTF-82,看看页面的编码方式是否是UTF-83,看看struts2的接传值编码方式是否是UTF-8,看看属性里的编码方式是否更改了。如果还是乱码我一般会在专案里直接建立一个空页面,然后把原的原始码复制到刚刚建立的空页面里,这样也能解决问题。

    网页错乱怎么解决?

    501638366!我QQ,你加吧嘻嘻!因为不同的浏览器,对css 的标准不同.做的时候多多对比就是了

      htmL css 如果视窗缩小,页面样式就错乱这个怎么解决?

      htmL css 如果视窗缩小,页面样式就错乱这个怎么解决?

      如果视窗缩小,页面样式错乱就要对每个元素设定长宽、浮动、定位保证每个元素唯一。

      HTML中引入CSS样式的形式:

      1、正常引入
      <link href="/build/wele.css" rel="stylesheet">。

      2、按需引入
      在需要的时候通过js引入。

      有两种思路
      1.设定最外层的div宽度为固定值,,950,,960,其它内容都放里面
      2.设定div的最小宽度

      淘宝登入页面错乱怎么解决

        首先你是不是同时登入了几个旺旺号,然后你的系统可能出现了混乱,你先全部退出,然后清理浏览器,然后再重新登入旺旺号。就可以了

      为什么缩小视窗页面布局就乱了

      看下的你的程式码是怎么写的,是不是每个的容器的位置都是固定的,还有容器的大小是百分比还是常量。因为看不到程式码具体原因无法分析,只能是猜测其可能造成这种现象的原因

      重新整理子视窗时,父视窗丢失样式,反之重新整理父视窗时子视窗样式丢失。两个页面呼叫了一个公共CSS。

      没遇到过这样的问题,感觉像是浏览器的bug,建议尝试将css分开,或者同时重新整理两个页面试试

      ie8页面错乱解决方案

      错位的请点选相容模式。

      为什么我把两个CSS样式表放到一起样式就错乱了

      因为有相同的类标签,比如样式a里面有.one{color:red},样式B里面也有.one { color:bule}

      页面乱码怎么解决

      乱码问题发生于编码方式不统一造成的,我来说一下我遇到乱码时的查询过程1,看看专案的编码方式是否是UTF-82,看看页面的编码方式是否是UTF-83,看看struts2的接传值编码方式是否是UTF-8,看看属性里的编码方式是否更改了。如果还是乱码我一般会在专案里直接建立一个空页面,然后把原的原始码复制到刚刚建立的空页面里,这样也能解决问题。

      网页错乱怎么解决?

      501638366!我QQ,你加吧嘻嘻!因为不同的浏览器,对css 的标准不同.做的时候多多对比就是了

        html5和css篇有关浮动以及如何清除浮动

        浮动和盒状模型、定位是CSS重点和难点。浮动,就是让div样式层块,向左或向右(靠)浮动。

        Float:left 靠左浮动;Float:right 靠右浮动;clear:both清除浮动,简单举例如下:

        CSS样式如下:

        .box1{ float:left; width:200px; height:300px; background:#f00;}/* 设置div对象浮动靠左*/ 
        .box2{ float:right;width:200px; height:300px;background:#0f0;}/* 设置div对象浮动靠右 */ 
        .clear{ clear:both;}/*清除浮动*/

        html代码如下:

        <div class="divcss5"> 
            <div class="box1">布局靠左浮动</div> 
            <div class="box2">布局靠右浮动</div> 
            <div class="clear"></div><!-- html注释:清除float产生浮动 --> 
        </div>

        效果如下:

        浮动利用好了,再结合相对定位,绝对定位,CSS排版基本上就能搞定了,细节的东西在实践中去体验吧。

        html5和css篇有关浮动以及如何清除浮动

        浮动和盒状模型、定位是CSS重点和难点。浮动,就是让div样式层块,向左或向右(靠)浮动。

        Float:left 靠左浮动;Float:right 靠右浮动;clear:both清除浮动,简单举例如下:

        CSS样式如下:

        .box1{ float:left; width:200px; height:300px; background:#f00;}/* 设置div对象浮动靠左*/ 
        .box2{ float:right;width:200px; height:300px;background:#0f0;}/* 设置div对象浮动靠右 */ 
        .clear{ clear:both;}/*清除浮动*/

        html代码如下:

        <div class="divcss5"> 
            <div class="box1">布局靠左浮动</div> 
            <div class="box2">布局靠右浮动</div> 
            <div class="clear"></div><!-- html注释:清除float产生浮动 --> 
        </div>

        效果如下:

        浮动利用好了,再结合相对定位,绝对定位,CSS排版基本上就能搞定了,细节的东西在实践中去体验吧。

        怎么解决浏览器的css样式兼容问题1

        有两种方法:

        1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。

        例如:

        padding: 20px !important; /For Firefox/

        padding: 10px; /For IE/

        (注意这里IE6是无法识别,important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)这个方法适用于修改少量代码。

        2、条件注释。(只对IE浏览器有效)这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

        注意:

        gt: greater than (高于)

        lte: less than or equal to (低于或等于)

        另外:IE还支持一个非标准的标签:comment

        This is not Internet Explorer.

        This is Internet Explorer.

        IE会自动把此标签中的内容当作注释处理掉。

        扩展资料

        关于css兼容性问题及一些常见问题

        目前主流浏览器的兼容性做的都比较好了,以下主要针对IE6,7的不兼容问题进行解决。

        1、有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。

        解决方法:给对应的父级加overflow:hidden;但是会有部分被隐藏掉,最好是精确计算宽高再设定。

        2、在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。

        3、在IE6下元素的高度的小于19px的时候,会被当做19px来处理。

        解决办法:添加overflow:hidden;

        怎么解决浏览器的css样式兼容问题1

        有两种方法:

        1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。

        例如:

        padding: 20px !important; /For Firefox/

        padding: 10px; /For IE/

        (注意这里IE6是无法识别,important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)这个方法适用于修改少量代码。

        2、条件注释。(只对IE浏览器有效)这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

        注意:

        gt: greater than (高于)

        lte: less than or equal to (低于或等于)

        另外:IE还支持一个非标准的标签:comment

        This is not Internet Explorer.

        This is Internet Explorer.

        IE会自动把此标签中的内容当作注释处理掉。

        扩展资料

        关于css兼容性问题及一些常见问题

        目前主流浏览器的兼容性做的都比较好了,以下主要针对IE6,7的不兼容问题进行解决。

        1、有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。

        解决方法:给对应的父级加overflow:hidden;但是会有部分被隐藏掉,最好是精确计算宽高再设定。

        2、在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。

        3、在IE6下元素的高度的小于19px的时候,会被当做19px来处理。

        解决办法:添加overflow:hidden;

        DIV+CSS网页布局时需要知道的几个技巧_html/css_WEB-ITnose

        本文向大家简单描述一下DIV CSS网页布局需要掌握的技巧,良好的习惯可能会使你的设计周期加倍缩短,下面让我们一起来学习吧。你对对DIV CSS网页布局需要掌握的技巧是否熟悉,这里和大家分享一下,良好的习惯可能会使你的设计周期加倍缩短。 以下是进行CSS设计时的几个小技巧 1.DIV CSS网页布局若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。 2.DIV CSS网页布局时使用浮动功能时记得适当清除指令 浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。 3.边界重合时利用padding或border来避免 有事可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合; 4.尝试避免同时对元素指定padding/border以及高度或宽度 Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。 5.DIV CSS网页布局时不要依赖min-width/min-height Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。 6.若有疑问,先减少百分比 有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。 7.DIV CSS网页布局时记住写法(TRBL) Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left.所以margin:01px3px5px;的结果是上方无边界,右边1像素,以此类推。这样就不会弄错次序了。 8.只要不是零的值,都要指定单位 CSS需要您对每个font,Margin等各种值指定单位。唯一的例外就是Line-height

        html+css问题,修改css样式后效果没生效

        第一步,打开编辑器,创建一个html页面

        第二步,给html页面添加内容

        第三步,创建一个css文件

        第四步,在html引入这个css文件

        第五步,给css文件添加样式代码

        第六步,查看效果,样式是否生效

        热乐宠物网还为您提供以下相关内容希望对您有帮助:

        在HTML5 CSS3中,请简述一下清除浮动的三种方法以及各自的优缺点?_百 ...

        建议:推荐使用,建议定义在公共类,以减少css代码 3、父级div定义overflow方法 当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。.parent-container { /* oth...

        html5和css篇有关浮动以及如何清除浮动

        Float:left 靠左浮动;Float:right 靠右浮动;clear:both清除浮动,简单举例如下:CSS样式如下:.box1{ float:left; width:200px; height:300px; background:#f00;}/* 设置div对象浮动靠左*/ .box2{ float:right;width...

        html+css问题,修改css样式后效果没生效

        第一步,打开编辑器,创建一个html页面 第二步,给html页面添加内容 第三步,创建一个css文件 第四步,在html引入这个css文件 第五步,给css文件添加样式代码 第六步,查看效果,样式是否生效 ...

        怎么解决浏览器的css样式兼容问题

        有两种方法:1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。例如:padding: 20px !important; /For Firefox/ padding: 10px; /For IE/ (注意这里IE6是无法识别,important 这个标记的,...

        为什么网页div浮动后,缩小时还是乱了呢,到底是哪里出错了?求帮忙_百 ...

        一般浮动缩小变乱的原因是设置了边框,因为边框不会随着页面缩小而缩小,所以导致撑破元素。建议你如果用边框的话就别把宽度算太死。留个几像素的宽度来缓冲一下。

        django无法加载出css样式,不管是admin还是自己创建的html都无法加载_百 ...

        在浏览器中打开django自带的后台admin,发现浏览器中是响应成功的,但是样式就是丢失了,这个时候不要着急,winl+R (win键是键盘左下角第二个键) 打开 输入regedit 打开你的注册表,然后找到 HKEY_CLASSES_ROOT -&gt; ....

        请问一下为什么html和css都写好了,打开网页后css样式不显示呢?_百度知 ...

        看图标记的 第一个错误,样式文件名错误 第二个错误,路径错误,你的css样式文件与html文件是在同一目录,但是你html文件里面引入的css路径是css文件夹里面的样式文件一共两个错误

        我的html文件css样式表修改后其他浏览器可以显示,但是谷歌的显示还是...

        1. 开发阶段的话,切换到chrome的开发者模式下,在开发者模式下的网络tab下,有个关闭缓存的复选框,你可以把它钩上看看效果。2.上线部署的话,如果你的html是引入一个css文件,当css内容发生变动的时候,你的html应该...

        ...中编写html文件时在head部分加入css样式出错,一条绿线,分析样式时出 ...

        .text{font-family:"黑体";color:#8b0000;font-size:12px/20px} 这一句的{...} 大括号应该是这样的。呵呵 你直接复制我这句好了,别在上面修改了,你可能输入法弄错了。。。最终效果我传了个图 ...

        我用HTML中div+css写的网页,有的IE支持,有的IE就不支持,Goole直接错位...

        4.浮动的清除,ff下不清除浮动是不行的。纠正大家一个误区,遇到不兼容就说ff烂是不对的,其实更多时候是ie的奇怪表现让我们无所适从。以下列出ie6的种种劣迹。5.最被痛恨的,double-margin bug。ie6下给浮动容器定义...

        本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

        Top