阜南网站建设公司,制作网站需要学什么软件有哪些内容,网络架构有哪些,网站建设品牌排行榜本文参考
https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722
文档流简介
正常文档流
正常文档流#xff0c;又称为“普通文档流”或“普通流”#xff0c;也就是W3C标准所说的“normal flow”。
我们先来看一下正常文档流的简单定义#xff1a;正常文档…本文参考
https://blog.csdn.net/ZhangJiWei_2019/article/details/114669722
文档流简介
正常文档流
正常文档流又称为“普通文档流”或“普通流”也就是W3C标准所说的“normal flow”。
我们先来看一下正常文档流的简单定义正常文档流将一个页面从上到下分为一行一行其中块元素独占一行相邻行内元素在每一行中按照从左到右排列直到该行排满。
也就是说正常文档流指的就是默认情况下页面元素的布局情况。
脱离文档流
脱离文档流指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变的默认情况下的HTML文档结构。换一句话说如果我们想要改变正常文档流
可以使用两种方法浮动和定位 二、浮动
浮动的元素会向左或向右浮动直到碰到前面已经有浮动的元素或者是其父元素的边框为止。浮动的元素会脱离文档流不再占有原来的位置。
一左右浮动
块级元素除了使用display: inline-block;可以使其共占一行外还可以使用浮动来实现。
还是两个div的例子正常状态下是这个效果。 我们给这两个div加一个外层容器作为他们的父容器
.father-box {border: #FF0000 4px solid;
}div classfather-boxdiv classbox1/divdiv classbox2/div
/div给第一个div设置向左浮动效果
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox2/div
/div可以看到页面效果发生了变化第二个div不见了其实第二个div并没有消失而是第一个div浮动起来之后它的空间被释放出来脱离文档流不占有原来的空间第二个div进行了向前补位去到了原本第一个div的位置被浮起来的第一个div遮挡住了。简而言之浮动的元素脱离了这个平面去到了这个平面的上方。
但浮动的元素不是无限制的浮动而是在自己父容器范围内浮动向左浮动时碰到其父容器的左边缘或者该元素前面其它已经浮动的元素就会停止。
这里的第一个div就是碰到了其父元素的左边框停止的。
接下来我们给第二个div也加上浮动
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/div
/div这时第二个div也浮了起来两个div又到了同一个平面上第二个div因为碰到了前面已经浮动的第一个div停止了浮动 (二清除浮动所带来的影响 虽然元素浮动起来之后可以实现共占一行的效果但是也给其父元素和后面的元素产生了影响所以就有了清除浮动所带来的影响的方法。
1. 清除第一种影响对父元素产生的影响。 上面的例子两个div都浮动起来之后因为脱离了出来导致其父容器内没有了东西所以父容器的高度也没法被撑开看上去像变成了一条线。
1给父容器加高度清除影响
.father-box {border: #FF0000 4px solid;height: 200px;
}2给父容器加overflow: auto或overflow: hidden清除影响 两种方式都可让父容器的高度恢复。
2. 清除第二种影响对后面元素产生的影响。
先回到没有清除影响的时候
.father-box {border: #FF0000 4px solid;
}我们再加一个div而且不设置浮动
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/divdiv classbox3/div
/div这时页面效果中父元素的高被新增的div撑开但是由于该div没有浮动还在这两个div的下层自动补位到了第一个div的下面被第一个div所遮挡住看不见。
要想让浮动元素的后续元素不自动向前补位也就是说即使元素浮动了原本的位置要给它留出来我们可以使用clear来清除这个影响它的值有left、right、bothleft代表清除左浮动带来的影响right代表清除右浮动带来的影响both代表两者都清除。
我们需要多加一个空白元素来执行清除影响
div classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/div!-- 使用一个空的 div 清除浮动 --div styleclear: both;/divdiv classbox3/div
/div第三个div恢复原有的排版独占一行。
向右浮动同理这里不再讲述。
本例完整代码
!DOCTYPE html
html
headmeta charsetutf-8title浮动/titlestyle.box {width: 100px;height: 100px;background-color: red;color: white;padding: 20px;margin: 20px;box-sizing: border-box;}.father-box {border: #FF0000 4px solid;}/style
/head
bodydiv classfather-boxdiv classbox stylefloat: left;1/divdiv classbox stylefloat: left;2/div!-- 使用一个空的 div 清除浮动 --div styleclear: both;/divdiv classbox3/div/div
/body
/html
