文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的IE6兼容问题 标准文档流...现在我们尝试给两个标签设置宽高。效果如下： ? 上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素h1生效。于是我们可以做出如下总结。...css中一共有三种手段，使一个元素脱离标准文档流： （1）浮动 （2）绝对定位 （3）固定定位 浮动的性质 浮动是css里面布局用的最多的属性。 现在有两个div，分别设置宽高。...此时，如果给这两个div增加一个浮动属性，比如float: left;，效果如下： ? 这就达到了浮动的效果。...不兼容的是overflow:hidden;清除浮动的时候。 总结： 我们刚才学习的两个IE6的兼容问题，都是通过多写一条hack来解决的，这个我们称为伴生属性，即两个属性，要写一起写。
例如，假设上图中的div2左浮动（float:left），那么它将脱离标准文档流，但div1、div3仍然在标准文档流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。...当同时对div2、div3设置浮动之后，div3会跟随在div2之后，div2在每个例子中都是浮动的，但并没有跟随到div1之后。...—来自张鑫旭 根据上边的基础，我们来看一个简单的例子，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下： 此时div1、div2都浮动，根据规则，div2...这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则...实践效果如下： 这样就达到了效果，试想一下，如果两个div都是右浮动，那么要如何实现上下排列呢，也就是div2在div1的下面？
（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响） 问题1：浮动元素后跟block元素&浮动元素后跟inline元素对布局的影响 浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置...问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。 （1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。...如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。 ...例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。...同样的，如果是box1向左浮动，box2和box1则会出现重叠，如例5；但如果在box2中设置clear：left；表示左侧不允许出现浮动元素，则box2同样会下移。 ?
例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动，占据div2的位置，重新组成一个流。如图： ? ...咳咳，到重点了，当同时对div2、div3设置浮动之后，div3会跟随在div2之后，不知道读者有没有发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。...至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。 ...根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下： ? ...这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则
当同时对div2、div3设置浮动之后，div3会跟随在div2之后，不知道读者有没有发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。...根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下： ?...这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则...那么假如页面中只有两个元素div1、div2，它们都是右浮动呢？读者此时应该已经能自己推测场景，如下： ? 此时如果要让div2下移到div1下边，要如何做呢？...但是有趣的是，h2和p里面的文本（属于content flow）却都看到了这个被float的div，在自己的盒子里往右推，飘到了蓝色div的边上。
1489394897277012185.png 发现问题了吗，各位？本来是一个p元素，当我在它里面放一个div元素的时候，一个p元素竟然被分成了两个，同学们，这样是不是很危险啊？...当然是有的，我们可以采用浮动布局，也就是说，让这些div元素“飘起来”，注意哦，飘起来以后，有两个方向，一个是向左漂浮，另一个则是向右漂浮。是的，只有这两种状态，没有第三种了。...明白了吗，只有两种，要么往左边浮动，要么往右边浮动。 我们来尝试一下，让所有class为box的元素都往左边飘。 ? 1489391733387085542.png ?...没有其他更玄妙的说法了，不论多么复杂的网页，如果用到了浮动布局，肯定就是这么回事，肯定是为了让某些div元素在一行上面显示。在这个例子中，我们如果让第三个盒子往右浮动，就给它单独加一个行内样式： ?...div元素因真爱成功私奔，还让空元素背锅，没WIFI也要看！ 最后呢，我们要讲的，就是关于清除浮动的问题了，先来看下问题的由来。
开发人员过去常常使用表格和浮动来创建布局，但这种方式难以维护，而且不太适应响应式设计。后来，媒体查询、弹性盒子和网格布局的引入彻底改变了开发人员创建布局的方式，使其更具响应性和易于维护。...但嘿，我们让它发挥作用了，对吧？但让我们真实一点，那是一种痛苦。代码难以维护，可访问性受到了影响，响应式设计也只是一个遥远的梦想。我们需要一种改变，而CSS就是那个改变！...但问题出现在我们尝试在浮动元素下方添加更多元素时。突然间，我们的页脚就像自己闯荡一样，紧贴在DOM结构中更高的内容旁边。哦，这个混乱！ 这是由于浮动元素的一个特殊特性导致的。...它们在正常的文档流中被部分移除，这意味着在标记中跟随它们的元素会像浮动元素不存在一样行为。 为了解决这个问题，我们不得不求助于我们现在亲切（或不太亲切）称之为"clearfix黑科技"的方法。...突然间，我们的页脚回到了它们应该在的位置，一切都恢复了正常。 尽管浮动具有一些古怪和意外的行为，但掌握浮动对于每个网页开发人员来说是一种成长的必经之路。
，但里面的文字是可以看见浮动元素的。...当一个普通元素遇到一个浮动元素，普通元素是看不见浮动元素的。但里面的行盒是可以看见浮动元素的，行盒会缩短并给浮动元素让位。 ? 写一下我理解的行盒的概念。...，但我的样式出现了问题div> .aside{ width: 150px; height: 300px; background: red;...（2）父容器高度计算出现问题 父元素看不到浮动元素，如果父元素没有设置高度，浮动元素是无法撑开父容器的。...五：浮动和负margin 两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负 margin 值。 当-margin加自身的宽度小于容器的宽度，可将其上移.
1 问题描述 在假期里较系统的学习了html的静态网页制作，但在这过程中出现了一系列问题，比如：如何用盒子模型布局；如何用html和css实现轮播图的效果等；值得我们关注的是很多同学遇到了一个相同的问题...自适应的div必须放在left和right前面且包含在一个父级div里。...父级的div，left和right模块都向左浮动，接着对自适应的div设置margin，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right...注意：自适应的div必须放在left和right前面且包含在一个父div里。 html代码： ? css代码： ? ? 自身浮动，原理：中间列设置margin属性，就是把左右列分别左右浮动。...处理图片缩放的方法 简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。 ? c.
在写css样式时，可能是添加了一个样式后就达到了预期效果。有没有想过，是我们在不经意间触发了什么，帮助我们达到了效果？...属于同一个BFC的两个相邻的Box的margin会发生重叠； 可应用到解决margin重叠的问题中： 可在其中一个元素外包裹一层容器，并触发该容器生成BFC（overflow:hidden;），这样两个元素就不属于同一个...(6)计算BFC的高度时，浮动元素也参与计算 可应用到解决浮动元素的父元素高度塌陷问题中： 如果父元素的子元素都是浮动元素，那么父元素的高度会发生高度塌陷（height:0）。...解决方法上面已经介绍过：可在其中一个元素外包裹一层容器，并触发该容器生成BFC（overflow:hidden;），这样两个元素就不属于同一个BFC了，就不会发生margin重叠的问题了。...overflow: hidden; } 效果： bfc解决两栏.png 不过我个人觉得这样做只是让BFC的区域不会与float元素区域重叠，实现了两栏布局效果，但并不是自适应的两栏布局，上述例子只是刚好父容器的宽度
其实通过我们上述说到的触发BFC的条件都可以实现上述效果，这里就不做过多的展示了 既然讲到了清除浮动，我们就来看一下除了上述说到的方法，还会用到什么办法呢？...实际效果就是，我们给子元素添加了 margin-top，但却是父元素整体与上一个元素拉开了距离，这就是我们常见的 「margin-top塌陷」 的问题 很明显，对子元素进行布局时影响到了其它元素的布局，...根据代码，按道理来说子元素1与子元素2之间应该相隔 20 + 50 = 70px，但实际却只有 50px ；同理，子元素2与子元素3之间应该相隔 70 + 50 = 120px，但实际却只有 70px...这是因为在垂直方向上，相邻两个元素若都设置了 margin 值，则按照较大的那个值来布局，这就是典型的「垂直方向上的margin重叠」问题 若此时为了避免「margin重叠」，我们可以给每一个子元素的外部添加一个父元素...按道理来说，浮动的元素脱离了正常的文档流，应该会覆盖住别的元素的内容，但为什么这里实现了文字绕图的效果呢？
这种思维传递到了“div+css”布局思维模式下，于是就出现了这样的结构： div class=”button”>div class=”left”>div>div class=”center”...否则，就只会想到三个div（或者其它元素组合方式），但是由于左右两个结构完全一样，为了区分它们，只好使用class或者id来标记。这就是我在上一篇中所提到的不必要的class和id。...为了解决这个问题，很多人喜欢给一组浮动元素的第一个加上class=”first”，从而可以对这个元素单独应用样式。或者对这一组浮动元素加上display:inline的属性以解决这个bug。...但是，如果不是非用margin不可，只要使用padding来代替margin，就能解决这个问题。或者采用与浮动方向相反的margin也可以。不需要任何额外的hack。...只有越理解盒模型，才能越好地利用浮动和定位来实现复杂、精确的布局。关于浮动的问题，下一次我们再一起来了解一下。
多列浮动布局 4. 浮动元素的宽度、高度自适应，但可以设置其值。 二、核心解决的问题 文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。...浮动元素与正常元素相邻，且浮动元素与正常元素之间没有清除浮动，此时正常元素会被浮动元素盖住，但包含的内容会围绕浮动元素显示。...100px; height: 200px; background: gray;float: none;" >002div> 001浮动，002没有浮动，但002元素本身被001盖住...="right">rightdiv> div> .head与.wrap两个box之间上下各设置有20px的外边距，但发生了重叠； .head与.left两个之间，.head有20px的外边距... a) Float、overflow、display三种方式都可以清除浮动，但position、fieldset虽然创建了bfc但不可以清除浮动（也就是不能解决高度塌陷的问题）。
"bg-danger" 类 尝试一下 其他 类 描述 实例 .pull-left 元素浮动到左边 尝试一下 .pull-right 元素浮动到右边 尝试一下 .center-block 设置元素为...display:block 并居中显示 尝试一下 .clearfix 清除浮动 尝试一下 .show 强制元素显示 尝试一下 .hidden 强制元素隐藏 尝试一下 .sr-only 除了屏幕阅读器外，...实例 div class="pull-left"> 向左快速浮动 div> div class="pull-right"> 向右快速浮动 div> 结果如下所示： 如需对齐导航栏中的组件...实例 div> div> 结果如下所示： 清除浮动 如需清除元素的浮动，请使用 .clearfix class。..."form-control" placeholder="Password"> div> div> 结果如下所示： 在这里，我们看到两个 input 类型的 label 标签都带有
问题图片如图所示，这种效果该怎么实现呢？面包屑导航和按钮一行两端显示面包屑或编辑栏超出宽度则自动另行显示图片实现采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。...高度塌陷当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。**怎么解决呢？**图片给父div加overflow: hidden清除浮动。...它可以清除浮动，但前提是浮动发生在该元素内部。当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。...为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。示例代码：问题，用js加css结合就可以实现，有没有更好的解决途径呢？回顾纯css找到了最优解，分享给大家，获取还会有更简洁的写法。
属于同一个BFC的两个相邻Box的margin会发生重叠（正常的不设置浮动，两个块元素margin重叠,仅仅是垂直方向，左右不是这个样子的） 3.每个元素的margin box的左边， 与包含块border...，又拉回来了，但保持了浮动的特点。）...理论上，两个p元素之间的外边距应当是二者外边距之和（20px）但实际上却是10px，这是外边距折叠(Collapsing Margins)的结果。 产生折叠的必备条件：margin必须是邻接的。...我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。...div> 由于左侧块级元素发生了浮动，所以和右侧未发生浮动的块级元素不在同一层内，所以会发生div遮挡问题。可以给右侧元素添加 overflow: hidden，触发BFC来解决遮挡问题。
作为一个每天都在使用CSS的人，作者无法接受自己不能深入理解这个问题的根本原因，所以决定深入研究sticky定位。...Stick 探索 在尝试使用 sticky 定位的过程中，我很快发现，当一个具有sticky定位样式的元素被包裹起来，并且它是包裹元素内唯一的元素时，这个被定义为sticky定位的元素并不会"粘"住。..."> div class="sticky"> SOME CONTENT div> div> 当我在包裹元素内添加更多元素时，它开始正常工作了。...这个元素没有其他元素可以浮动，因为它只能浮动在兄弟元素上，而作为唯一的子元素，它没有兄弟元素。 CSS Sticky 定位的真正工作原理！...CSS 的 sticky 定位有两个主要部分，即粘性元素和粘性容器。 粘性元素 - 是我们使用 position: sticky 样式定义的元素。
+普通元素的 margin便可以实现，但如果是自适应的两列布局，利用float+overflow:hidden便可以实现，这种办法主要通过 overflow 触发 BFC,而 BFC 不会重叠浮动元素。...浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。 2.绝对定位布局 表格布局的兼容性很好，在 flex 布局不兼容的时候，可以尝试表格布局。...但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。...7.双飞翼布局 ① 特点 同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。
例如，假设上图中的div2浮动，那么它将脱离标准流，但div1、div3、div4仍然在标准流当中，所以div3会自动向上移动， ?...咳咳，到重点了，当同时对div2、div3设置浮动之后，div3会跟随在div2之后，不知道读者有没有发现，一直到现在，div2在每个例子中都是浮动的，但并没有跟随到div1之后。...根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下： ?...这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则...那么假如页面中只有两个元素div1、div2，它们都是右浮动呢？读者此时应该已经能自己推测场景，如下： ?
在网页设计中清除浮动是一种非常常见的需求，这篇博客将介绍几种常见的清除浮动的方法 引出使用场景 假定我们需要创建3个div标签，并且将他们的类名分别命名为box1、box2和box3，将box1和box2...，box3也跑到了第一行上，因为当给box1和box2设置了浮动后，而浮动的元素是脱离了标准文档流，而浏览器会认为脱离了标准文档流的元素不占位置，而box3依然在标准文档流中，所以box3会跑到浏览器的最左端...，使用Clear : both清除浮动会使得元素的margin-top和margin-bottom属性失效 方法2：使用ovflow: hidden 为box1、box2两个元素引入一个父元素，并且给父元素添加一个...在浏览器中运行的效果如下： 通过观察可知使用overflow: hidden属性清除浮动，不会让box3的margin-top属性和margin-bottom属性失效 方法3：使用伪类清除浮动 在实际开发中为了解决清除浮动在不同浏览器下的兼容问题...">我是box2 div> 我是box3 meishadevs欢迎任何形式的转载，但请务必注明出处，尊重他人劳动成果
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
