我是靠谱客的博主 发嗲电灯胆,最近开发中收集的这篇文章主要介绍float浮动的原理和工作方式,以及浮动造成的问题总结,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

浮动float

浮动元素是脱离文档流的,不占据空间。

浮动元素碰到包含它的元素的边框或者其他浮动元素的边框会停留下来。

 

浮动元素会引起的问题:

1)父元素的高度无法撑开,影响与父元素的同级元素。

2)与浮动元素同级的非浮动元素(内联元素)会跟随其后。

3)若非第一个元素浮动,则该元素之前的元素也需要跟随其后,否则会影响页面的显示的结构。

清除浮动的几种方法:

1)<div style=”clear:both”></div>可以很好的解决浮动的2,3问题

增加了一个额外的元素,这是一个弊端,会使得html页面结构看起来不够简洁。

 

2)该方法比较好。可以很好的解决第一种浮动问题

#parent:after{

content:’.’;

height:0;

visibility:hidden;

display:block;

clear:both;

}

 

3)让overflow设置为hidden或auto

给包含浮动元素的父标签添加css属性。

overflow:auto;

zoom:1;<可以兼容ie6>

最后

以上就是发嗲电灯胆为你收集整理的float浮动的原理和工作方式,以及浮动造成的问题总结的全部内容,希望文章能够帮你解决float浮动的原理和工作方式,以及浮动造成的问题总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(67)

评论列表共有 0 条评论

立即
投稿
返回
顶部