文档章节

清除浮动知多少呢?

溪语_8023
 溪语_8023
发布于 2016/12/01 16:04
字数 414
阅读 2
收藏 0
点赞 0
评论 0

1、使用时清除元素本身,不影响其他元素。当页面有两个div被设置成向左浮动时,想要让第二个元素下移,

这是就要让第二个元素设置clear:left,让第二个元素左边不存在浮动元素

2、clear:both清除左右两边的元素。

它利用清除浮动来把外层的div撑开,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,

原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

三、clearfix:清除浮动

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开

①在外部div容器的内部中设置一个div的style属性为:clear:both;可以将外部div撑开,在子集清除浮动。但是这样做多了一个无关紧要的div。

②最好的解决方式就是在外层加入一个类clearfix,让其在div容器最后添加内容,

内容不显示,但仍然占据空间,清除两边的浮动,不必在html文件中写入大量无意义的空标签。

.clearfix { *zoom:1;}  这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。

③overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容,从而实现了清除浮动

© 著作权归作者所有

共有 人打赏支持
溪语_8023
粉丝 0
博文 26
码字总数 17289
作品 0
杭州
CSS清除浮动

前言 总括: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出...

Damonare ⋅ 2016/12/07 ⋅ 0

css之浮动布局float

1、两个div按顺序写,他们也不会同行显示,而是换行显示 <!DOCTYPE html><html><head> <meta charset=" utf-8"> <title>float 浮动布局</title> <style type="text/css"> #left { width: 100......

cobish ⋅ 2014/08/08 ⋅ 0

CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物 ⋅ 2016/04/07 ⋅ 0

前端开发笔记(3)css基础(中)

上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流。 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文...

lxq_xsyu ⋅ 2016/11/18 ⋅ 0

后端工程师入门前端页面重构(二):心法 I

本文由 KnewHow 发表在 ScalaCool 团队博客。 上一篇博客是我们《后端工程师入门前端页面重构》系列的第一篇,我们介绍了页面布局的口诀: 从左到右,从上到下,化整为零。 那么在接下来的几...

⋅ 02/07 ⋅ 0

CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空...

艺晨光 ⋅ 2017/08/22 ⋅ 0

关于Clear:both,left,right

清除浮动是一个很常见的东西。得了解下,不能就记个形式,这样对自己不负责呀。 问题的描述,前端写代码稍不留神,就会这个熊样。 我的本意是,在这个DIV里放三个DIV,但是三个DIV并没有撑开...

送你一碗大麦茶 ⋅ 05/30 ⋅ 0

小记css中float浮动问题

脱离了tabel布局的时代,div+css的布局使我们的网站更加灵活易用,但是发现初学者总是不约而同的犯同样的错误,且有些还屡犯不改,呵呵,我想大约与我一样,很多时候做事情只追求“解决”,而...

Rella ⋅ 2012/08/09 ⋅ 1

关于BFC的一些思考

Question 以下三个div将会会如何放置(margin collapsing)? 同一个BFC中,相邻的块状元素都是垂直放置吗? 如何清除浮动?根据什么原理? 如何对左侧栏200px,主内容自适应进行布局? 如何使...

shanyue ⋅ 2017/11/29 ⋅ 0

overflow:hidden的作用

功能1、隐藏溢出 在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来。 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐...

Sherlock_z ⋅ 2013/12/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 20分钟前 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 46分钟前 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

C++难点解析之const修饰符

C++难点解析之const修饰符 c++ 相比于其他编程语言,可能是最为难掌握,概念最为复杂的。结合自己平时的C++使用经验,这里将会列举出一些常见的难点并给出相应的解释。 const修饰符 const在c...

jackie8tao ⋅ 昨天 ⋅ 0

聊聊spring cloud netflix的HystrixCommands

序 本文主要研究一下spring cloud netflix的HystrixCommands。 maven <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-clo......

go4it ⋅ 昨天 ⋅ 0

Confluence 6 从其他备份中恢复数据

一般来说,Confluence 数据库可以从 Administration Console 或者 Confluence Setup Wizard 中进行恢复。 如果你在恢复压缩的 XML 备份的时候遇到了问题,你还是可以对整个站点进行恢复的,如...

honeymose ⋅ 昨天 ⋅ 0

myeclipse10 快速搭建spring boot开发环境(入门)

1.创建一个maven的web项目 注意上面标红的部分记得选上 2.创建的maven目录结构,有缺失的目录可以自己建立目录补充 补充后 这时候一个maven的web项目创建完成 3.配置pom.xml配置文件 <proje...

小海bug ⋅ 昨天 ⋅ 0

nginx.conf

=========================================================================== nginx.conf =========================================================================== user nobody; #......

A__17 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部