css页面浮动与清除浮动的介绍
更新时间：2017年1月22日 11:03 点击：1823
小编推荐的这篇文章介绍了页面浮动与清除浮动，学习中遇到不懂的同学可以参考一下
一、float：主要目的是为了实现文本绕排图片的效果。
也成了创建多栏布局最简单的方式。
|
<imgsrc= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
|
【1】文本绕排图片
|
P {margin:0;border:solid1px;}
img {float:left;}
|
【2】创建多栏布局
|
P {margin:0;border:solid1px;width:200px;float:left;}
img {float:left;}
|
二、浮动元素脱离了文档流，其父元素也看不到他了，因为也不会包围他，就会出现子元素有高度，而父元素不会被撑起，这时候并非我们想要，
下面有三种方法解决，请审时度势合理应用：
|
<section>
<imgsrc=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>
|
|
section , footer {border:solid1px;}
img {float:left;}
|
【1】为父元素添加 overflow： hidden；强制父元素包围浮动元素
这样声明的真正用途是 防止父元素被超大内容撑开，应用overflow： hidden之后，父元素依然保持其设定的宽度，超大的子内容会被容器剪切掉
除此之外，overflow： hidden还有另外一个作用，即它能可靠地迫使父元素包含其浮动子元素。
不能在使用下拉菜单的顶级元素上使用，否则作为其子元素的下拉菜单就不会显示了。
【2】同时浮动父元素, 宽度100%与浏览器宽度同宽， 给footer设置清除浮动，使footer不会挤到section旁边去
|
section {border:solid1px;float:left;width:100%}
footer {border:solid1px;clear:left}
img {float:left;}
|
不能在靠外边距自动居中的元素使用。否则不再居中。
【3】添加非浮动的清除元素（伪元素）
|
.clearfix: after {
content:"";
display:block;
height:0
visibility:hidden;
clear :both
}
|
三、没有父元素时，如何清除(img p 作为一组 ，没有父元素)
|
<section>
<imgsrc=" />
<pclass="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
<imgsrc=" />
<pclass="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
<imgsrc=" />
<pclass="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>
|
|
.clearfix: after {
content:"";
display:block;
height:0
visibility:hidden;
clear :both
}
|
上一篇: CSS中flex兼容深入研究
下一篇: 用CSS实现各种图片滤镜效果演示
相关文章
- 这篇文章主要介绍了@CacheEvict 清除多个key的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-13
- 这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25
PHP传值到不同页面的三种常见方式及php和html之间传值问题
在项目开发中经常见到不同页面之间传值在web工作中，本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了，本文总结一下这段日子中，在编程过程里常用的3种不同页面传值方法，希望可以给大家参考。有什么意见也希望大...2015-11-24- 直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- Promise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法，感兴趣的朋友一起看看吧...2021-10-21
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 对于乱码这个问题php开发者几乎都会有碰到过，我们下面主要是介绍了php文件乱码和页面乱码。PHP页面转UTF-8编码问题 1.在代码开始出加入一行： header("Content-Type: text/html;charset=utf-8"); 2.PHP文件编码问题...2015-10-21
- 这篇文章主要介绍了java后台实现js关闭本页面,父页面指定跳转或刷新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-16
- 定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器，本文就介绍了Vue如何优雅的清除定时器，感兴趣的可以了解一下...2021-07-22
- 这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下...2021-02-09
- 这篇文章主要介绍了vue实现在进行增删改操作后刷新页面，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05
- 这篇文章主要介绍了Pycharm 跳转回之前所在页面的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-05
- bootstrap布局是应用得很广泛的一种网页布局方法，下面通过本文给大家介绍bootstrap页面缩小变形的快速解决办法，需要的朋友参考下吧...2017-02-08
- 这篇文章主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了 判断页面访问方式电脑或者移动端的相关资料,这里提供了三种方法，需要的朋友可以参考下...2016-10-03
PHP中print_r、var_export、var_dump用法介绍
文章详细的介绍了关于PHP中print_r、var_export、var_dump区别比较以及这几个在php不同的应用中的用法，有需要的朋友可以参考一下 可以看出print_r跟var_export都...2016-11-25Framewrok7 视图介绍（views、view）使用介绍
下面我们来看一篇关于Framewrok7 视图介绍（views、view）使用介绍吧，希望这篇文章能够帮助到各位朋友。 一、Views 与View的介绍 1，Views (<div class="views">) （1）Vi...2016-10-02- 这篇文章主要介绍了在vue中实现嵌套页面(iframe)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31
- PHP日志类库在低版本中我们都没有看到了但在高版本的php中就有了，下面我们来看一篇关于PHP日志类库使用详解介绍吧． Monolog遵循PSR3的接口规范，可以很轻易的替换...2016-11-25