100%会问的float？

相信大家对于float都不陌生，float:left:向左浮动，float:right:向右浮动嘛。但是，它具体是什么情况，什么个意思呢？

昨天，刚学习了圣杯布局，从而对之有了进一步的理解。

首先，让我们来了解下什么是文档流和脱离文档流。

百度搜索过：

文档流：英文原版文档为"normal flow"，翻译成常规流、普通流也就更好理解它了。从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。如图所示：

脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。如图所示： css样式： .item{float: left; }

昨天老师是这样教我们理解的:文档流就好比我们去食堂排队打饭一样，一个接着一个往后排。脱离文档流呢，就好比队伍中的一人被拎出来了。

那么，我们的float就有使元素脱离文档流的这个效果了。

理解了以上的小知识，就让我们来了解一下什么是圣杯布局吧？

圣杯布局:为了提高用户的体验，让最重要的东西在第一时间加载出来。正如我们平常看到的网页：中间是我们需要的内容，而内容两端，则呈现一些广告啥的......

圣杯布局就是利用我们的float属性，将我们的“广告”布置在主要内容的两侧。效果如图所示：

我们两侧的内容left,right本来是按照文档流的形式排列在main内容的下面的。但当我们对left设置如下属性:

     float: left; margin-left: -100%;position: relative;left: -200px;
复制代码

我们的left 就会位于main的左侧啦；

对于right：

      float: left; margin-left: -200px;position: relative;left: 200px;
复制代码

我们的right就位于main 的右侧了。

这就是所谓的圣杯布局，这就是float的神奇之处。

100%会问的float？相关推荐

面试官100%会问的接口测试的知识
概述我做测试这些年,面试过很多童鞋.大部分人在我问到什么是接口测试时,都会侃侃而谈:我用jmeter/postman发送一个请求出去啦,看一下响应结果,如果200就算通过.如果不是200就记下来,有 ...
chatgpt不好使？那是你不会问，github上收集的100多种问法，让你快速玩转chatgpt
你觉得没什么可用,是因为你不会用 github上大牛门收集的一百多种问法,快去试试吧原文地址:https://github.com/f/awesome-chatgpt-prompts 由于是官方问法 ...
服装店老板一件衣服进价19，卖22，一骗子拿100买件，老板没零钱，去和别人调了100元，找了那人78元，第二天发现钱是假的，又赔了100，问老板总共赔多少
分析:首先这个邻居是来干扰解题思路的老板首先资产是收到100假钱,-100-19(衣服的成本)-78(找给骗子的钱)+100(这一百是干嘛的,肯定有人要问,这100是和隔壁老王换的真钱,然后又有人 ...
ios和android前景！阿里面试100%会问到的JVM，架构师必备技能
Android开发的现状目前,移动开发已经处于饱和的阶段,Android开发也不如当年盛况,已经不再像前几年前那么火爆.正如一种编程语言如果经历过盛极一时,那么必然有这样的一条曲线,像我们学的正弦曲 ...
安卓sdk开发！阿里面试100%会问到的JVM，架构师必备技能
接触这一行也有很久了,从开始的实习到带团队,中间接触过很多人,前不久身边刚好有人去面试了阿里,抖音等这些公司还成功的面试上了,现在来分享一下面试前需要准备的知识点很多人去面试之前,不知道会问到那些知 ...
面试官100%会问的软件测试面试题！！（必看）
目录一.问题预测让简单介绍下自己(每次面试开场) 让说下自己会的内容看了哪些书籍(有问到) 了解过哪些技术博客/论坛(有问到) 是否了解软件测试需要掌握哪些知识(问到类似问题) 之前面试过,觉得 ...
安卓软件开发！阿里面试100%会问到的JVM，威力加强版
第一次观看我文章的朋友,可以关注.点赞.转发一下,每天分享各种干货技术和程序猿趣事由于涉及到的面试题较多导致篇幅较长,我根据这些面试题所涉及到的常问范围总结了并做出了一份学习进阶路线图 ...
Android开发新手入门教程！阿里面试100%会问到的JVM，一线互联网公司面经总结
前言 2020年,互联网裁员潮下,我度过了人生中最清晰的半年. 今年我本命年,熬过了程序员35的坎,却在36岁被公司破产来了当头一棒,领完了当月份的工资,老板,也是我哥们的老李走进我的办公室,没有迂回 ...
李乐衡填写的恐怖的100连问
1．时间:2008年6月12日 20:36 2. 网名 acedriver7132 3. 昵称: acedriver 4. 蛋糕上蜡烛的数目: 14 5. 你通常吹熄这些蜡烛的日期: 7 19 6. ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...

100%会问的float？

首先，让我们来了解下什么是文档流和脱离文档流。

理解了以上的小知识，就让我们来了解一下什么是圣杯布局吧？

100%会问的float？相关推荐

最新文章

热门文章