css清除浮动的处理方法
根据《精彩绝伦的css》
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.news{
outline:1px solid pink
}
.col{
float: left;
width:33%;
outline:1px solid blue;
}
</style>
</head>
<body>
<div class="news">
<div class='col one'><p>some text-one</p></div>
<div class='col two'><p>ConHugeCo has permanently altered the theory of niches. What do we morph? Anything and everything, regardless of namelessness!</p></div>
<div class='col three'><p>some text-three</p></div>
</div>
</body>
</html>//这里出现的为图<1>
清除浮动的方法:
- 以溢出遏制浮动 --最终展示效果图<2>
.news{
Overflow : auto;
}
好处:简单
劣势:浏览器自动回添加滚动条
2.以浮动遏制浮动 --出现的问题图<3>
.news{
Float: left;
}
劣势:浮动层的宽度不定,后面的元素会受到这个元素的影响
<div class=’ news >…</div>
<div id=’footer’>2015 comany</div>
出现这个问题:
解决办法:
.footer{
Clear : both;
}
Width:100% //解决宽度不定,不能用auto,div层是浮动层
3. 清除浮动 --图<4>
<div class=’ news >
….
<br>
<p> 2015 company</p>
</div>
添加<br>
br{
Clear : both;
}
4.相邻清除
上面那个例子还有个解决办法
.col.three + *{ clear:both;
}
转载于:https://www.cnblogs.com/jinTaylor/p/4365573.html
css清除浮动的处理方法相关推荐
- css清除浮动无效,css清除浮动的处理方法
根据<精彩绝伦的css> JS Bin .news{ outline:1px solid pink } .col{ float: left; width:33%; outline:1px ...
- css清除浮动的集中方法
一:浮动产生的副作用 1.父元素的背景不能显示 2.父元素的边框不能撑开 3.padding和margin失效 二:清除浮动的方法 1.给父元素设置高度:这样可以清除浮动,但是子元素内容高度不固定,这 ...
- css清除浮动的六种方法
css中使用float属性时会造成局部坍塌或者内容上顶以及文字环绕等一系列情况出现. 总结了一共六种方法其中有两种最为常用: 1.height属性给父元素设置固定高度 当父元素下的子元素进行了浮动时, ...
- css清除浮动4种方法
为什么浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性. 而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动 ...
- web前端,css清除浮动的常见方法
一.为什么要清除浮动 当我们为盒子设置浮动样式的时候,这是盒子将会脱离标准流,这样原先布局的其他内容将会占据盒子的位置,这样就没法看见相关内容. 而在清除浮动之后,父级就会根据浮动的子盒子自动检测高度 ...
- CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- div为空的时候 浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达 作者:html中文网 | 编辑:前端妹 来源:html.cn/web/css/19613.htm ...
- 一、css清除浮动方法学习笔记总结(超详细,简单易懂)
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
最新文章
- Linux makefile中的= := ?=操作符
- JavaFX SceneBuilder设置按钮的背景颜色
- java异常_Java线程池「异常处理」正确姿势:有病就得治
- 在Linux系统终端利用ggc,大学计算机:Linux下C编程.pdf
- 【Android开发】Android应用程序目录结构
- MySQL审计特性调研
- linux es数据库 head,centos7安装Elasticsearch及Es-head插件详细教程(图文)
- 【设计】全差分设计报告
- 多项式算法的常数问题
- 计算机类绘图的文献,基于计算机CAD绘图探讨论文
- 小程序二进制图片 buffer存储_可能没有想象的那么美好——微信小程序存储占用与清理实测...
- Word打字很卡顿 Office打字时反应慢 延迟 Excel输入迟钝 PPT卡死的终极解决办法大全(24种方法)
- LaTeX 美化表格位置
- java经纬度工具类
- svn快速入门使用教程
- parentElement\parentNode.parentNode.childNodes用法例子
- HomeBrew安装软件慢的简单有效解决方法
- 按洲分组国家地区标准代码
- PEP8规范的中文版
- CSS三种样式表(内部样式表、行内样式表、 外部样式表)