https://www.cnblogs.com/smivico/p/7656270.html 浮动 https://www.jianshu.com/p/4b93eecb090e BFC https://www.jianshu.com/p/7e04ed3f4bea 为什么overflow:hidden能清除浮动&与BFC的联系…

1.什么是浮动,浮动的作用 “浮动”从字面上来理解就是“悬浮移动.非固定”的意思.块级元素(div.table.span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观.这就要用到浮动了.被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果. 例如. 未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)中. 图1 给承载图片的元素设置浮动后,如下图2显示 图2 注:图1未设置父级元素高度.图2设置了父级元素的高度. 2.为什么要清除浮动 未设置浮动时显…

cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时候需要清除浮动? 我们对元素进行了浮动(float)时,我们的元素就会脱离文档流,像一只小船一样漂流在文档之上. 在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. float主要流行与页面布局,然后没有使用后没有清除浮动,就会后患无穷. 知乎上截图:  分析HT…

上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例. 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.所以浮动也有left.right.none三种.浮动元素是脱离文档流的,漂浮在文档流之上,和文档流不是一个层次. HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而这些水就代表的是页面中的各个元素,他们都是有顺序的进入水槽(文档流的顺序 和我们写字一样…

float:none | left | right 默认值:none 适用于:所有元素 none:设置对象不浮动left:设置对象浮在左边right:设置对象浮在右边 当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block.也就是说,浮动对象的display特性将被忽略. float在绝对定位和display为none时不会被应用. 什么时候用浮动?--让元素变成一行,水平布局时.需要文本环绕效果时 浮动的特点,半脱离文档流,且会对…

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是…

浮动因素在静态网页制作中经常被应用到,比如要让块级元素不独占一行,常常应用设置float的方式来实现.但是应用的时候会发现,设置了子类浮动后,未给父类清除浮动,这样就会造成一下问题: 1.浮动的元素会相对于父容器或者是前面已经定位的元素进行浮动,浮动的元素脱离文档流,也就是不再占有原有的位置,会影响后面的元素或者是父容器. 2.父容器正常情况下会自动扩高,但是子元素加了浮动后位置不保留,父容器就感觉它不存在了,所以不会扩高. 所以,在编写静态网页时,一定要注意浮动的清除问题,一段清除浮动代码可以…

一. 浮动 1. 浮动的定义 使元素脱离文档流,按照向左或向右的方向移动,直到它的外边缘碰到包含它的框或另一个浮动框为止. 脱离文档流就是在页面中不占位置了. 左浮动右浮动此处就不再赘述了. 2. 看一下浮动的一些情况 (1). 只给第二个p浮动时,3不见了,他其实在2的下面,我给3一个宽一点的宽度.会发现3在2的下面. (2). 给3一个浮动 他会没有什么变化,因为浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的 (3). 把外边框的div宽度变小,会导致无法容纳所有的浮动元素,…

浮动的清除有两种方式: 一.clear clear:both/left/right; 二.创建BFC (1)什么是BFC? BFC,块级格式化上下文,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干.通俗的讲就是相当于一个把浮动的元素框起来并隔离的容器,容器里面的子元素不会影响到外面元素,使浮动不会溢出. (2)哪些元素会生成BFC? ①根元素或其它包含它的元素 ②float的值不为none ③ove…

---恢复内容开始--- 圆角矩形 border-radius:50%  40%  30%  33px:   像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 10  : ID选择器 100  :行内样式 1000:  !important  无穷大: 层级 浮动/标准的盒子代码位置越往下,层级越高 层级一样,代码在后面的盒子会压住前面的盒子 浮动的盒子会压住标准的 定位的盒子会压住浮动的 高低和占不占位置无关,relative占位置,也比不占位置的浮动层…