float理解-程序员宅基地

float浮动规则:向指定方向移动,直到碰到包含它的元素或同样float元素的边框。如果元素浮动,则不占空间,block元素浮动会失去block属性,应该是变为inline-block属性,因为可以设置宽高。但与absolute的不占空间不同,float有时会影响周边元素。以下是相关影响。

  • 如果float元素的前面是非block元素,且这些元素在同一行,则浮动会影响它前面的元素,把它前面的非block挤到边上。

如图:浮动元素bbb只会影响它前面一行的非block元素,并且这些元素需能在一行上。

<div style="position: relative; left: 20px;">
            <div style="background: cadetblue;">aaa</div>
            <span style="background: blueviolet;">hhh</span>
            <span style="background: gray;">aaa</span>
            <div style="background: green; float: left;">bbb</div>
            <div style="background: green;">bbbgg</div>
        </div>
  • 如果它前面的非block元素一行放不下了,则去影响它下面的一行。此时可以把它前面的过长的非block元素当block元素看。即如果float元素前面的元素是非block元素,那么float元素只会影响其下面的元素,不会影响上面的。如果它下面是非block元素,则把该元素往边上挤,如ddd。如果它下面是block元素,则会覆盖上该元素,但奇怪的是,只是背景的覆盖,依然会把改块状元素的内容挤到边上。

<div style="position: relative; left: 20px;">
            <div style="background: cadetblue;">aaa</div>
            <span style="background: blueviolet;">hhh</span>
            <span style="background: gray;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
            <div style="background: green; float: left;">bbb</div>
            <span style="background: gray;">ddd</span>
            <div style="background: cornflowerblue;">bbbgg</div>
        </div>
  • 前面说了,浮动元素会不会影响写在它上面的元素主要是看上面的元素是否占据了一整行。但是只要浮动元素面积够大,并且下面不出现清理浮动的CSS,那么下面的元素均会受影响。上面的例子只是由于浮动元素体积小,所以看不出来而已。

我们在上面的代码基础上,给浮动元素增加高度,如图会影响所有下面元素。

<div style="position: relative; left: 20px;">
            <div style="background: cadetblue;">aaa</div>
            <span style="background: blueviolet;">hhh</span>
            <span style="background: gray;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
            <div style="background: green; float: left;height: 400px;">bbb</div>
            <span style="background: gray;width: 100px;">ddd</span>
            <div style="background: cornflowerblue;">bbbgg</div>
        </div>

以上是同一个div的。那如过浮动和下面被影响的元素不在同一个div呢?

  • 其实和上面说的一样,如果是非块状则挤到一边,如果是block则只是覆盖背景,文字依然会被挤到一边。如果下面是<div> <span style="background: goldenrod;float: left;"> cccc </span> </div>这种的,你可以直外面套着的div忽视掉,里面span所受的影响与外层div无关。当然也不是毫无关系,比如外层如果使用了clear,那么里面这层也不受影响了。所谓的背景覆盖,在我把浮动元素背景透明度调低后,就直观了。

 

 

<div style="position: relative; ">
            <div style="background: cadetblue;">aaa</div>
            <span style="background: blueviolet;">hhh</span>
            <span style="background: gray;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
            <div style="background: green; float: left;height: 400px;opacity:0.5">bbb</div>
            <span style="background: gray;width: 100px;">ddd</span>
            <div style="background: cornflowerblue;">bbbgg</div>
        </div>
        <div> <span style="background: goldenrod;"> cccc </span> </div>
  • 最后,如果我们给包含float元素,加上个偏移,则float会挡住ccc,如下图,不管ccc是块状还是非块状还是同样是浮动都一样,这个跟正常流的移动位置覆盖到边上元素,没什么区别。

<div style="position: relative;left: 20px; ">
            <div style="background: cadetblue;">aaa</div>
            <span style="background: blueviolet;">hhh</span>
            <span style="background: gray;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
            <div style="background: green; float: left;height: 400px;">bbb</div>
            <span style="background: gray;width: 100px;">ddd</span>
            <div style="background: cornflowerblue;">bbbgg</div>
        </div>
        <div> <span style="background: goldenrod;float: left;"> cccc </span> </div>

 

 总结:其实对于写在浮动元素上面的元素来说,是否受影响,取决于它们是否能单独占领一行。对于下面的元素来说,其实都是把文字等挤到一边,无非就是会不会覆盖背景的区别。另外下面元素所受的影响与外面嵌套了多少个正常流并且不包含clear的div无关。

 

转载于:https://www.cnblogs.com/xwtcm/p/7337653.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30861797/article/details/99781022

智能推荐

DEFCON携手百度安全落地中国,打造国际化网络安全交流平台_百度引入defcon-程序员宅基地

文章浏览阅读601次。2月12日,DEFCON与百度安全在北京召开签约发布会,共同宣布全球网络安全盛会DEFCON 将于今年正式登陆中国,并与百度安全联合主办“御 ·见未来”2018首届DCCB(Def Con China Baidu)安全行业国际峰会,汇集全球网络安全人才,相聚北京共话安全。DEFCON是全球安全领域的顶级会议,从发起至今已有25年历史,被誉为安全界 “奥斯卡”,由全球最具影响力黑客Jeff Moss..._百度引入defcon

html代码在线运行_在线运行html代码_html在线运行-程序员宅基地

文章浏览阅读5.8k次。平时需要编写些HTML和JS代码,所以业余时间找了下相关线上运行HTML和JS的网站,这里汇总一下。这里面收集的网站地址,都可以在“程序员快速导航网” 上找到。附地址:程序员快速导航网HTML代码在线运行和预览网站汇总:1:http://jsrun.net/Cj2Kp/edit2:http://zouni.run/3:http://3br.net/htmlbasic.html4:https://www.w3school.com.cn/tiy/t.asp?f=html5_audio5:ht_html在线运行

计算机专业英语第四版教程课文翻译,计算机专业英语教程(第4版)-程序员宅基地

文章浏览阅读1.5k次。UNIT1Passage:ComputerHardwareNewWordsPhrasesAbbreviationNotestothePassageComprehensionExercisestothePassageExercisestoTermsandVocabulariesExercisetoaShortPassagePassageforReading:..._summary of computer's components

关于frp开机自启动_ceontos 开机启动 frp-程序员宅基地

文章浏览阅读1.7k次。frpc开机后台启动(centos7)frp作为一款内网穿透工具,使用起来极为方便,但每次客户端关机重启后都需要手动开启,较为麻烦,使用以下脚本进行centos7开机自启设置:sudo vim /etc/systemd/system/frpc.service[Unit]Description=frpc daemonAfter=syslog.target network.targetWants=network.target[Service]Type=simpleExecStart=/o_ceontos 开机启动 frp

VS Code“彩虹屁”插件来袭,玩起花式夸赞!-程序员宅基地

文章浏览阅读1.9k次。点击上方“程序员黑叔”,选择“置顶或者星标”你的关注意义重大!转载/图灵联邦 阅读本文需要2分钟前言啾~我的可爱已成功导入...再厉害的函数也执行不出我对你的喜欢~..._vs彩虹屁插件

Error processing condition on org.springframework.cloud.netflix.eureka.server.EurekaServer..错误-程序员宅基地

文章浏览阅读2.7w次,点赞5次,收藏3次。java.lang.IllegalStateException: Error processing condition on org.springframework.cloud.netflix.eureka.server.EurekaServerAutoConfiguration.peerEurekaNodes。。。。 找到的解决办法:改为:即可。..._error processing condition on org.springframework.cloud.netflix.eureka.eurek

随便推点

kali笔记(七)burpsuite设置代理_kalithe proxy server is refusing connections-程序员宅基地

文章浏览阅读8.2k次,点赞4次,收藏27次。打开burpsuite并设置监听端口给浏览器设置代理,在firefox中可以直接在AutoProxy这个插件中添加使用burpsuite 将证书到处至浏览器或者访问 http://burp/..._kalithe proxy server is refusing connections

Linux-git使用_linux git-程序员宅基地

文章浏览阅读3w次,点赞28次,收藏179次。一、git的使用1.git简介如果你用Word写过毕业论文,那你一定有这样的经历:想删除一个段落,又怕将来想恢复找不回来怎么办?有办法,先把当前文件“另存为……”一个新的Word文件,再接着改,改到一定程度,再“另存为……”一个新文件,这样一直改下去,最后你的Word文档变成了这样:过了一周,你想找回被删除的文字,但是已经记不清删除前保存在哪个文件里了,只好一个一个文件去找,真麻烦。..._linux git

VUE图片预览放大缩小插件viewer_vue3图片缩放插件-程序员宅基地

文章浏览阅读1.2k次。VUE图片预览放大缩小插件一、安装依赖npm install v-viewer --save二、main.js内引用并注册调用//main.jsimport Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer);Viewer.setDefaults({ Options: { "inline": true, "button": true, "navbar": true, "title": true_vue3图片缩放插件

史上最强 Tomcat8 性能优化实战!-程序员宅基地

文章浏览阅读450次。作者:ThinkWon链接:blog.csdn.net/ThinkWon/java/article/details/102744033文章目录目的服务器资源Tomcat配置优化 L..._"

C++之多线程_c++线程百度网盘-程序员宅基地

文章浏览阅读258次。多线程//C++参考秒杀多线程系列 多线程笔试面试题汇总 ---- //主要 讲解详细C++ 多线程 面试题详解C++多线程编程之常见面试问题 C++ 11 多线程–线程管理程序员的自我修养(五):C++ 多线程编程初步..._c++线程百度网盘

国产FPGA那家强_国产fpga 哪家好-程序员宅基地

文章浏览阅读3.9w次,点赞6次,收藏29次。国产FPGA那家强写了这么多FPGA的文章却从来没有涉及过国产FPGA,很多网友甚至不知道还有国产FPGA。下面列举一些国产FPGA,排名不分先后,标题只是噱头。内容如有侵权,请联系小编进行删除。1 西安智多晶微电子有限公司西安智多晶微电子有限公司总部位于西安,北京设立有EDA软件研究中心。目前已实现55nm、40nm工艺中密度FPGA的量产,并针对性推出了内嵌Flash、SDRAM等集成化..._国产fpga 哪家好