css为什么要清除浮动

Wesley13
• 阅读 420

DIV1宽度为100px,

DIV2宽度为50px,

如果上级DIV层的宽度大于DIV1+DIV2的宽度,

DIV2设置浮动属性float:left,

DIV2会像流水一样,自动显示在DIV1的右侧,

如果上级DIV层的宽度等于或者小于DIV1+DIV2的宽度,

那么,DIV2层就会被挤到DIV1的下方.

如果DIV1设置了清除属性,DIV2就不会流动到DIV1的后面,

而是直接显示在DIV1的下面.

(请看下图)

css为什么要清除浮动

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
2年前
小记面试题-2021
CSS类1.解释浮动及其工作原理浮动的元素可以向左或者向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度。虽然浮动的元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现的就像浮动元素不存在一样,下面的元素会填补原来的位置。有些
菜园前端 菜园前端
1年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Wesley13 Wesley13
2年前
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题
一: 右侧固定宽度左侧自适应  第一种方法:左侧用marginright,右侧float:right 就可以实现。    HTML代码可以如下写:   <div      <ahref""target"_blank"我是龙恩</a   </div <div
Wesley13 Wesley13
2年前
CSS块级元素与行内元素
CSS块级元素与行内元素行内元素与块状元素1、块级元素:可以设置width,height属性。行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。可以通过lineheight设置行高(行高和height是不同的东西)。2、块级元素:可以设置margin和padd
Wesley13 Wesley13
2年前
CSS定位和滚动条
0805自我总结一.绝对定位position:absolute;/绝对定位:1、定位属性值:absolute2、在页面中不再占位(浮起来了),就无法继承父级的宽度(必须自己自定义宽度)3、一旦定位后,定位的布局方位top、bottom、left、right都能参与布局
Stella981 Stella981
2年前
Python自动化测试PO模式
页面元素定位信息页面元素定位信息文件leadscloud_logininput_user_namexpath//@id'main'/div/div2/div2/div2/div/form/div1/div/div/inputinput_user_passwordx
Stella981 Stella981
2年前
DIV+CSS兼容解决DIV最大宽度和最小宽度问题
在制作网页中,我们经常会碰到min/maxwidth,min/maxheight在IE6底下是无效的,这也是web设计师最头疼的问题之一,以下的方法可以解决这些难题,并且比较简约。当然,如果你还有更好的方法,希望能在主页留言给我:<divstyle"maxwidth:250px;"这段文字内容,ax/min在ie7和firfo
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
2年前
CSS之清除浮动 && float属性
DIV层内的元素在使用了float属性后无法自动改变高度的解决办法:有的时候为了让外侧层根据内容自动调整,没有设置高度或宽度,一般都会正常显示。但如果层内元素使用了float属性,就会使那些元素脱离文件流,就无法再扩充容器层,就会导致外层大小无法根据内容自动调整。关于这个问题,总结出以几种在当下几种主流浏览器都兼容的方法,供大家参考。1.清除浮动在层
Wesley13 Wesley13
2年前
CSS复习笔记二:浮动和清除浮动
 一、浮动的性质1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。2、浮动的元素相互贴靠3、浮动的元素有“文字环绕”效果       含有图片的div浮动,段落不浮动,文字会环绕图片。4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。浮动(脱标)的元素是不能把容器惩处高度的。二、浮动的清除