石家庄小学网站建设,网站备案 关闭网站,做淘宝美工和网站设计那个好,清新大气企业公司网站源码浮动模型又叫流模型#xff0c;什么是float#xff08;浮动#xff09;
最早是为了适应报纸的排版#xff0c;文字环绕图片的效果#xff0c;后来经过使用和研究发展出一系列复杂的用法。
CSS 的 Float#xff08;浮动#xff09;#xff0c;会使元素向左或向右移动什么是float浮动
最早是为了适应报纸的排版文字环绕图片的效果后来经过使用和研究发展出一系列复杂的用法。
CSS 的 Float浮动会使元素向左或向右移动其周围的元素也会重新排列。 Float浮动往往是用于图像但它在布局时一样非常有用。
一个浮动元素会尽量向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动流
为了说明什么是浮动流我们先用代码看一下效果
div classdemo1/div
div classdemo2/div
-----------------------------------------------------------------
.demo1 {float: left;width: 100px;height: 100px;background-color: green;
}.demo2 {width: 150px;height: 150px;background-color: gray;opacity: 0.5;
}效果demo1这个div设置了一个向左浮动我们会看到demo2覆盖了demo1 问题这是不是说明浮动元素也脱离了原来的层级呢
其实并不是这是因为浮动元素产生了浮动流所有产生了浮动流的元素块级元素是看不到他们的也就是说块级元会认为浮动元素所占的位置是没有东西的就会自动覆盖上去。 问题注解BFC化的元素和文本类属性的元素带有inline的元素
以及文本可以看到浮动元素。
但是没有BFC化的块级元素看不到浮动元素。
也就是说产生浮动的元素对不同的其他元素的影响不同。
什么是BFC
块格式化上下文Block Formatting ContextBFC 是Web页面的可视化CSS渲染的一部分是布局过程中生成块级盒子的区域也是浮动元素与其他元素的交互限定区域。
BFC(Block Formatting Context)块级格式化上下文。 BFC决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用。当设计到可视化布局的时候BFC提供了一个环境HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。
BFC的原理渲染规则
BFC元素垂直方向的边距会发生重叠。属于不同BFC外边距不会发生重叠BFC的区域不会与浮动元素的布局重叠。BFC元素是一个独立的容器外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素。计算BFC高度的时候浮动元素也会参与计算(清除浮动)
如何创建BFC
overflow不为visible;float的值不为noneposition的值不为static或relativedisplay属性为inline-blocks,table,table-cell,table-caption,flex,inline-flex;
例如 poosition:absolute; display:inline-block;float:left/right; overflow:hidden;看一个例子假设我们有这样一个需求父元素是一个自适应高度的div需要把带有浮动属性的子元素填充到这个父元素中
bodydiv classboxdiv classcontent1/divdiv classcontent2/divdiv classcontent3/div/div
/body
----------------------------------------------------------------
* {margin: 0;padding: 0;
}.box {border: 1px solid black;
}.content {float: left;height: 100px;width: 100px;background-color: gray;
}这是因为子元素是浮动元素父元素是块级元素块元素看不到浮动元素但是行内元素可以看到。
解决方案有两种
第一种解决方式但是这种方式不推荐因为会改变文档的结构。
在浮动元素的同级dom下添加一个行内元素标签比如p标签再给它添加一个css样式cleanboth清除所有浮动流这样p标签左右的浮动就被清除了父级元素就被撑开了。
div classboxdiv classcontent1/divdiv classcontent2/divdiv classcontent3/divp classclean/p
/div
------------------------------------------------------------
.clean {clear: both;
}第二种解决方式推荐
使用伪元素来清除浮动 关于伪元素可以参考这里 伪元素开发中应使用这种方式。
div classboxdiv classcontent1/divdiv classcontent2/divdiv classcontent3/div
/div
--------------------------------------------------------------------
/*使用伪元素来清除逻辑上最后的浮动*/
.box::after {/*伪元素必须设置content属性*/content: ;/*clear属性只对块级元素生效,所以要把伪元素设置成块级元素*/display: block;clear: both;
}清除浮动后的效果如下
