[css]浮动-清除浮动的方法

清除浮动的方法: 内墙法

注: 这是个奇淫技巧,没什么原理可言,记住即可

这个技巧又使得父box重新可以被子box撑开高度了.

隔墙法-适用于2个box之间上下排列

由于2个box高度依旧是0, 彼此之间的margin还是不生效. 可以用墙来撑开

        .cl {
            clear: both;
        }

        .h16 {
            height: 16px;
        }
<div class="box1">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</div>

<div class="cl h16"></div>

<div class="box2">
    <ul>
        <li>学习方法</li>
        <li>英语水平</li>
        <li>面试技巧</li>
    </ul>
</div>

overflow: hidden

注: 这是个奇淫技巧,没什么原理可言,记住即可

同时又使得父box又可以被子box撑开高度了.

附录

overflow: hidden的用途

表示“溢出隐藏”。所有溢出边框的内容,都要被隐藏掉。

原文地址:https://www.cnblogs.com/iiiiiher/p/8446807.html

时间: 2024-10-10 17:35:09

[css]浮动-清除浮动的方法的相关文章

【css】清除浮动的几种方式

[css]清除浮动的几种方式 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

html 4 浮动 清除浮动

前一个元素设置浮动了 紧挨着的元素就浮动在上个元素的下面 被上个元素给覆盖 要不想被覆盖 要清除浮动 clear:left  clear:right 左浮元素不覆盖   右边元素不覆盖 clear:both; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

css中清除浮动的方法总结

1.父级div定义height <style type="text/css"> .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;} .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px} .left{float:left;width:20%;height:200px;background:#DD

CSS常用清除浮动方法总结

1.对父元素使用overflow:hidden;zoom:1,或者是overflow:auto;zoom:1. 兼容性问题:该处使用zoom:1是为了兼容ie6,但是实际上,用height:1%;代替zoom:1;更好,因为它可以通过W3C. 该方法缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素. 2.在浮动元素后面添加新的元素,再使用clear:both.缺点:无意义的空标签,不利于语义化. 3.给浮动元素的父元素使用:after伪元素.如下: .outer{z

css中清除浮动的方法

1.浮动后会影响别的元素,可以用clear:both来清除浮动. 例如<div class="box1"></div> <div class="box2"></div> css: .box1{ float:left;}     .box2{ clear:both ; } 2.子级浮动会导致父级高度塌陷,可以使用overflow:hidden找回高度

css中清除浮动的几种方法(自己总结)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>清除浮动</title> <style type="text/css"> ul{list-style:none;outline:1px solid;} ul li{padding:5px 8px;background:#ccc;f

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

div+css之清除浮动

1.对父级设置适合CSS高度对父级设置适合高度样式清除浮动,这里对“.divcss5”设置一定高度即可,一般设置高度需要能确定内容高度才能设置.这里我们知道内容高度是100PX+上下边框为2px,这样具体父级高度为102px 2.clear:both清除浮动 为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“</div>”结束前加此div引入“class="clear"”样式.这样即可清除浮动.

关于CSS样式清除浮动的总结

浮动的元素之间是互相贴靠的.但是在实际的工作中,我们是希望同组的元素互相贴靠的,但是不同组的元素之间是不互相贴靠的.第二组的元素不应该与第一组的元素有任何互相的影响. 比如,我们想要的效果是这样的: 但是如果浮动没有清除的话,就会变成这样: 清除浮动有四种方式,一般常选用后两种,根据不同的情况进行选择. 1)加高法: 浮动的元素,只能被有高的盒子关住.但是,工作上绝不会给所有的盒子都加高度,因为这样很麻烦,而且没法适应页面的快速变化. 2)clear:both 最简单的清除浮动的方法,就是给盒子