css 清除float的方法
首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝对 要么相对 ,都是能解决的.
这个概念才理解的时候,我都想为什么要清除,我都设置了还要清除干嘛?
后来知道 这个清除float 并不是把自身浮动清除,而是相对与前后兄弟标签来说的,也可能相对父级标签; 下面来解释一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.div1{
width: 90px;
height: 90px;
background-color: steelblue;
border: 1px red solid; }
</style>
<body>
<div style="background-color: gold; border: 1px solid red;">
<div class="div1">标签1</div>
<div class="div1">标签2</div>
<div class="div1">标签3</div>
<div class="div1">标签4</div>
<!--<div style="clear: both; "></div>-->
</div>
</body>
</html>
因为DIV是块级标签很DIAO的,全部自成一行,如果想在标签一后后面直接跟上div1就要加入float:left;
结果出现的情况是因为原来的父级DIV标签没有设置高度导致高度坍塌,全部脱离文档流后没有东西能撑起高度.原来的边框也就是一条线了!
就是在底部加入了行标签 ,关键是里面的CSS,clear:both;
他会清除里面所有的兄弟标签的float:left的属性,父级标签也撑起来了,所有的标签1 2 3 4都按左依次排列. 这个方法即让元素按设定浮动,又没有损害父类的高度.可以随着内部标签的增加,父级标签自动的填满背景,不坍塌.结果如下:
还有另外一种方法:
css 清除float的方法的更多相关文章
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- 前端开发CSS清除浮动的方法有哪些?
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- css清除浮动的方法汇总
这是在其他地方看到的一篇文章,汇总的不错,摘过来做个记录. 引用地址 : http://www.cnblogs.com/ForEvErNoME/p/3383539.html ------------- ...
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- CSS清除float浮动
一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 本来两个黑色对象盒子是在 ...
- CSS清除浮动各种方法
当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象.这个现 ...
- css清除浮动的方法总结
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 we ...
- css清除浮动各方法与原理
说到清除浮动的方法,我想网络上应该有不下7,8的方法,介绍这些方法之前,想下为什么清除浮动? 再次回到float这个属性,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联 ...
- CSS清除浮动的方法及优缺点
浮动是CSS布局里面用的比较多的属性.浮动的框向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 因为浮动会使当前元素产生向上浮的效果,所以浮动的元素会脱离正常的文档流,它包围的内容在 ...
随机推荐
- android android遇到的错误
android遇到的错误 一.eclipse运行.生成.打包APK报错: 原因1: jdk版本太低,升级jdk 原因2: tools选择: android sdk build-tools 大于等于2 ...
- 「BZOJ 3209」花神的数论题
Title Link 戳我 Title Solution 这道题可以运用组合数的思想啊,数位dp也可以,随便你怎么做,这里就讲一讲组合数的做法吧,要小于n,所以我们可以枚举n二进制下1的位置,在i-1 ...
- Can't install Solaris 10 on XenServer 6.5 VM
I have XenServer 6.5 installed on a server, and i have been trying to install Solaris 10 on a VM, it ...
- luoguP3415 祭坛
https://www.luogu.org/problemnew/show/P3415 考虑二分结界层数,将 n 个点按 x 大小依次加入答案,一行一行的做,用树状数组维护当前这一行中[0, x - ...
- CF914E Palindromes in a Tree(点分治)
link 题目大意:给定一个n个点的树,每个点都有一个字符(a-t,20个字符) 我们称一个路径是神犇的,当这个路径上所有点的字母的某个排列是回文 求出对于每个点,求出经过他的神犇路径的数量 题解: ...
- SDUT OJ 数据结构实验之图论四:迷宫探索
数据结构实验之图论四:迷宫探索 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descrip ...
- layer mobile开发layer.full
Layer For Mobile 之 layer.full() 背景介绍:layer mobile是专门针对手机页面开发的一套框架,具体介绍请看官方文档 http://layer.layui.com/ ...
- fread 快速读入 (神奇挂!)
注意这里是将后台的所有数据都读入在计算 #include<bits/stdc++.h> using namespace std; #define ll long long namespac ...
- UESTC - 1147 求最短路方案数
这道题很是说明了记忆化搜索的重要性 瞎bfs递推半天发现没卵用(也许是姿势不对,但我认为树形或图形dfs明显好写并且很好正确地递推) 参考了别人的写法,总感觉自己的实现能力太弱了 还有题目是1e9+9 ...
- scrapy框架初识
一.scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架就是一个已经被集成了各种功能(高性能异步下载,队列,分布式,解析,持久化等)的具 ...