美文网首页
CSS清楚浮动方法

CSS清楚浮动方法

作者: 戈德斯文 | 来源:发表于2017-06-05 11:30 被阅读0次

1.加高

直接给父级元素加高度
问题:扩展性不好

2.给父级元素也加浮动

问题:如果父级也有父级,就还要加浮动。margin左右自动失效。
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; float:left; } .div{ width:200px; height:200px; background:red; float:left; }
</style>
<div class='box'>
<div class='div'></div>
</div>

3.给父级元素加inline-block

问题:margin左右自动失效
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; display:inline-block; } .div{ width:200px; height:200px; background:red; float:left }
</style>
<div class='box'>
<div class='div'></div>
</div>

4.给父级元素加inline-block

问题:IE6最小高度19px;解决:需在.clear加font-size:0;(解决后IE6下还有2px偏差)
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; float:left } .clear{ height:30px; background:blue; clear:both; }
</style>
<div class='box'>
<div class='div'></div>
<div class='clear'></div>
</div>

5.
清浮动

问题:不符合工作中:结构、样式、行为,三者分离的要求
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; float:left }
</style>
<div class='box'>
<div class='div'></div>
<br clear='all'> <--等同于css中的clear:both;-->
</div>

6. :after伪类清浮动方法(现在主流方法)

<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; } .div{ width:200px; height:200px; background:red; float:left } .clear:after{ /*IE6\7不支持*/ content:''; display:block; clear:both; } .clear{ zoom:1; }
</style>
<div class='box clear'>
<div class='div'></div>
</div>
在IE6\7下浮动元素的父级有宽度就不用清浮动
zoom缩放,出发IE下haslayout,使元素根据自身内容计算宽高。FF不支持。

7.overflow:hidder清浮动方法

问题:需要配合宽度或者zoom兼容IE6\7
<style>
.box{ width:300px; margin:0 auto; border:10px solid #000; overflow:hidden; } .div{ width:200px; height:200px; background:red; float:left }
</style>
<div class='box'>
<div class='div'></div>
</div>

相关文章

  • CSS清楚浮动方法

    1.加高 直接给父级元素加高度问题:扩展性不好 2.给父级元素也加浮动 问题:如果父级也有父级,就还要加浮动。ma...

  • 小猿圈之HTML/css清除浮动的方法都有哪些?

    清楚浮动对于前端学习者是比较了解的,刚开始接触前端就需要了解,那你知道HTML/css清除浮动的方法都有哪些?小猿...

  • CSS定位相关知识点

    参考文档 《----css样式---------浮动带来的影响与解决方法---------------》 CSS ...

  • CSS两边固定中间自适应布局

    1:使用浮动 html: css: 2:使用绝对定位 html: css: 3:使用flexbox方法 html:...

  • 前端面试积累2-清除浮动

    1.清除浮动的方法 方法一:对父级设置适合的CSS高度(不推荐) 方法二:clear:both 清除浮动 (常用)...

  • vue商城-2.目录搭建

    1.项目目录规划 2.引入css base.css:主题色,清楚浮动,字体等样式 normalize.css:让不...

  • 浅谈CSS关于清除浮动的三种方法

    浅谈CSS关于清除浮动的三种方法 CSS中,因为布局需要,我们常常希望出现一些浮动布局,比如图文环绕。这些浮动布局...

  • 清除浮动

    在CSS里面添加clear属性可以清楚浮动,但是可以在CSS里面加如下代码 这样,你就可以在你不想要浮动效果的di...

  • 清除浮动

    CSS清除浮动方法集合 一、浮动产生原因 -TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS floa...

  • 清除浮动

    -方法1:伪元素清除浮动(也是小编最常用的方法)css如下: html如下: -方法2:在浮动元素下方添加块级元素...

网友评论

      本文标题:CSS清楚浮动方法

      本文链接:https://www.haomeiwen.com/subject/psdifxtx.html