float浮动处理

视频链接:

https://ke.qq.com/webcourse/index.html#course_id=132463&term_id=100148007&taid=620244817282415&vid=o1410oqdx82

使用float后父容器的高度将不会被子元素撑高,针对这一问题有几种解决方法具体在代码里,但推荐使用以下两种方法:

1.为当前元素添加以下样式

.clearfix:after{
  clear: both;  //清除浮动
  content: "";
  display: block;  //显示为块级元素
  visibility: hidden;
}

2.为当前元素添加overflow: hidden;的样式,但有弊端,超出容器部分会被隐藏,选择性使用!

代码例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>float</title>
<style type="text/css">
body,html{margin: 0;padding: 0;}

div{padding: 15px 30px; font-size: 14px;color: #333;}
.wrap{
border: 1px solid red;
widows: 980px;
margin: 20px auto 0;
background: #fafafa;
}
.main{
height: 100px;
widows: 500px;
background: #ccc;
}
.side{
widows: 220px;
background: #eee;
}

.left{float: left;}
.right{float: right;}

.footer-bar{
border: 1px solid blue;
background: #ccc;
widows: 980px;
margin: 20px auto 0;
}

.clear{clear: both;}
.clearfix:after{
clear: both;
content: "";
display: block;
visibility: hidden;
}
.clearfix{*zoom:1;}

</style>
</head>
<body>

<div class="wrap">
<div class="main left">.main 的内容没有撑高父容器</div>
<div class="side right">.side 设置了右浮动</div>
</div>
<div class="footer-bar clear">.footer-bar 通过设置clear:both 清除浮动,但.warp的高度没变</div>

<div class="wrap clearfix">
<div class="main left">.main 可以清除浮动了,因为给div wrap加上了css伪类方式清除,不用给footer-bar div清除浮动了</div>
<div class="side right">.side 设置了右浮动</div>
</div>
<div class="footer-bar">.footer-bar 通过设置clearfix清除浮动</div>

<div class="wrap">
<div class="main left">.main </div>
<div class="side right">.side 设置了右浮动</div>
<div class="clear"></div>
</div>
<div class="footer-bar">.footer-bar 通过添加空的div设置clear</div>

<div class="wrap">
<div class="main left">.main 违背了我们常提出的显示和结构分离</div>
<div class="side right">.side 设置了右浮动</div>
<br clear="all"/>
</div>
<div class="footer-bar">.footer-bar 通过添加br换行符清除浮动</div>

<div class="wrap" style="overflow: hidden;">
<div class="main left">.main 通过div设置超出隐藏清除浮动</div>
<div class="side right">.side 设置了右浮动</div>
</div>
<div class="footer-bar">.footer-bar </div>

</body>
</html>

时间: 05-08

float浮动处理的相关文章

CSS布局之float浮动

之前对CSS的浮动布局总是一知半解,最近开发中用的多了,对它的用法进行一些总结,以便以后忘记时可以查到.哈哈,别说我记性不好,我可是说真的,毕竟前端的知识实在是多而杂,多做笔记,遇到问题时网上搜索资料是其一,但我觉得更重要的是把你遇到的问题和解决方法记录下来..这样以后你的开发效率是多高.言归正传,对浮动进行一些记录. 1.首先,网页是一个文档流,默认按块元素和级联元素从左到右,从上至下的依次显示.而Float浮动元素,就好比是漂浮在了文档流之上,不占据文档流的位置. 如下就是不进行任何浮动的文

CSS float浮动的深入研究、详解及拓展(一)

概念目录 个人感悟之CSS代码的情感化思维 个人观点之浮动的意义仅仅是文字环绕显示而已 个人观点之浮动的本质是"包裹及破坏" 个人观点之目前大多数浮动应用都不是浮动应该做的 个人观点之浮动其实是个魔鬼.混球 一.引言 你我看待事物的方式不同,价值取向也不同,因为我们有着不同的世界观,价值观.这种世界观的差异不仅仅体现在实际的生活中,也反映在代码上.你我看待代码的方式,或者说是代码在我们情感层面的位置是不一样的,我这里说的是情感层面,与逻辑无关,与算法无关(虽然算法受情感影响).这种看待

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

归纳篇(一)CSS的position定位和float浮动

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼

overflow解决float浮动后高度自适应问题

也许你在做网页的时候发现,发一个区块内的元素被应用了float之后,那么整个box的高度对就不以被浮动对象的高度为标准了.如图中的城市导航内的城市列表中采用了float之后,那个外框的高度并不是内容元素的高度: 怎么解决这个问题呢?经发现可以采用overflow来解决!方法是在父元素加上如下代码即可 overflow:auto; zoom:1; overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决. 1 1 <!DOCTYPE h

清除float浮动造成影响的几种解决方案

1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响”  学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子 块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌 浮动的破坏性 浮动导致高度坍陷代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars

CSS Positioning(定位)与Float(浮动)

一.CSS Positioning(定位) 1.Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法.有四种不同的定位方法. 2.Static 定位 HTML元素的默认值,即没有定位,元素出现在正常的流中.静态定位的元素不会受到top, bottom, lef

给li设置float浮动属性之后,无法撑开外层ul的问题。

最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查了相关内容,是因为给li设置了浮动之后它就脱离当前正常的文档流,所以没办法撑开外层ul的高度. 以下面代码为例,其实有好几种解决方法,我用的这种并不是最简单的. <!DOCTYPE html ><html ><head><meta charset="utf-