清除div浮动的三种方式

最新推荐文章于 2020-12-31 00:48:11 发布
最新推荐文章于 2020-12-31 00:48:11 发布
阅读量95 收藏
点赞数
原文链接：http://www.cnblogs.com/openflyme/p/5100485.html
版权

html:

<body>
<div class="main">
<div class="first"></div>
<div class="second"></div>

</div>
</body>

<style>
.main
{
overflow:hidden;
border:1px solid black;
}
.first{
width:100px;
height:100px;
float:left;
background:#33ffff;
}
.second
{
float:left;
width:300px;
height:300px;
background:#9900ff;

}
.clear
{
clear:both;
}
</style>

1:将main父级div增加高度

2：增加<div class="clear"></div>

3:将父级div增加：overflow:hidden

转载于:https://www.cnblogs.com/openflyme/p/5100485.html

weixin_30446197
关注
html div浮动效果,【html】【6】div浮动float
weixin_36323601的博客
06-03 2453
我想 当看完上面的必看链接，拥有一定的基础后也得7天左右，记住 一定要看完，知道它都有什么，没学会不要紧，哪怕只是有个简单的概念也行，随着后续的使用慢慢深入学习，现在开始div布局。必看参考：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.htmlhttp://paranimage.com/css-float-attribute/ht...
div清除浮动的四种方式
weixin_43990215的博客
07-09 4854
div 清除浮动的四种方式 清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题。 简单来说给父元素加一个高度也能解决这个问题，但是很多情况下不方便给父元素高度。所以，一般情况下，应该让子元素内容自动撑开父元素，不要写死父元素的高度。 clear 属性用于清除浮动，以下是清除浮动的几种常见方式。 1. 额外标签法 在浮动元素后面添加一个新的空 div，这个空 div 的样式添加 cl...
清理Div浮动的两种方法
diandian82的专栏
03-30 961
HTML 代码： Some Content 上面这个代码，如果直接显示，最外层class为clearfix的div是不会显示的，因为它里面的div是浮动元素（float:left），这样会使它脱离了文档流，从而导致了最外层div的height为0. 可以用以下方法进行浮动的清理。 方法1：增加元素进行清理。这样做的缺点就是会产生无用的多余代码 Some Conten
css label 居中布局_[css] 第449天 写出固定子容器在固定的父容器下水平垂直居中的布局...
weixin_39918248的博客
12-31 72
/* 方法一 */.father {width: 300px;height: 300px;border: 1px solid black;display: flex;justify-content: center;align-items: center;}.son {width: 100px;height: 100px;background: cadetblue;}/* 方法二 */.father...
css-居中篇
weixin_34408624的博客
02-13 83
1.水平居中： margin: 0 auto;水平居中最常用的一种方法，作用于子元素 <style> * { padding: 0; margin: 0; } .box { width: 300px; height: 300px; background: #ffce38; border: 1px solid black...
项目实战中的布局技巧，垂直居中
zayyo的博客
07-17 271
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> .flex__c...
CSS3新属性 border-radius版企鹅
最文艺的程序媛
07-11 345
Document body{ margin-top: 100px; margin-left: 500px; } .head{ width: 300px; height: 240px; border: 1px solid black; background-color: #000; position: relative; border-radius: 150px 150px
div清除浮动css样式代码分享(4种方法)
09-25
在前端开发中，浮动（float）布局是一种常见的页面布局方式，尤其在早期网页设计中广泛使用。然而，浮动元素会带来一个问题，即“浮动塌陷”（Floated Element Collapse），也就是父元素无法正确包裹住其内部浮动的...
DIV+CSS 清除浮动常用方法总结
12-13
在网页设计中，`DIV+CSS` 是一种常见的布局方式，它通过定义`div`元素的样式来构建页面结构。浮动（`float`）是 CSS 中一个关键的概念，用于实现元素的定位，常用于创建多列布局。然而，浮动元素会脱离正常的文本流...
div三栏布局左中右通过float浮动来设置
09-25
- 使用Flexbox或Grid布局：这两种现代布局方式可以更方便地处理此类问题，无需考虑浮动。 在上述代码中，由于没有对父元素应用任何清除浮动的方法，所以如果`body`元素的高度不足以容纳所有浮动元素，可能会出现...
div清除浮动
得已
02-09 1667
style="clear:both" 清除上两个层的浮动，也就是说以下的层就继续垂直排列了
【HTML】解决DIV消除浮动问题(clear)
Alan的博客
10-19 3674
知识点: 清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。 1.在一个大盒子里面放两个浮动的小盒子，这种情况大盒子会认为自己里面没内...
HTML-浮动与清除浮动
小头Sophia
12-10 1万+
1.浮动：float：left；right；none 2.浮动的模块是不占用位置的，如下： 如果给上面的div1和div2加上左浮动，则div3就会上移，出现如下所示效果： 为了让div1和div2占有它原来的位置，让div3显示在它们下面，则要清除浮动。 关于浮动的清除有以下几种： 1）clear 2）添加额外的标签 3）伪元素 3.开发工具：WebSto
Css清除浮动常用方法
LUOandHUANG的博客
06-21 3777
1、为什么要浮动 首先我们要知道为什么要给元素设置浮动。HTML中标签分为：块级标签，行内标签，行内块标签。其中块级标签和行内块标签以及行内标签的排列方式是不一样的，块级标签是独占一行的，而行内块元素和行内元素是在同一行内排列的，只有当排满或者容不下元素时才会另起一行显示。因此想要块级元素在同一行内显示，或者想要设置元素浮动对齐的方式就需要将元素浮动起来。css中float属性用来设置元素的浮动，...
div标签消除浮动
fgx_123456的博客
07-11 960
（1）&lt;div id="id1" style="width:300px;border:1px solid black"&gt;      &lt;div id="id2" style="width:100px;height:20px;float:left;border:1px solid red"&gt;第一个div&lt;/div&gt;    &lt;div id
清除浮动最有效的css写法
泠泠似水
03-04 2万+
说起来呢，基本上只要你给容器div加了float的属性，就需要清除浮动来使页面显示正常，那么，到底有什么方法可以让浮动轻松清除呢？ 可以用display：flex;替代，但是它对IE8，9支持不是很好，所以不怎么这么用。1.在容器div的里面结束标记之前写如下这样的div这段代码：<div style="clear:both"></div>虽然通俗易懂，容易掌握，但是在页面中加入了一个无意义的空标
浅谈css中浮动和清除浮动带来的影响
weixin_30631587的博客
10-27 568
有很多时候，我们都会用到浮动，而我们有时候对浮动只是一知半解，却不是太清楚它到底是怎么回事，不知道各位有没有和我一样的感觉，只知道用它，却不知道它到底是怎么回事，所以，在学习的过程中，就要把一个概念不是很清晰的问题把它弄清楚了，便于我们以后的使用。早些时候，W3C规定出来的浮动实际并不是为了布局所用，当时是为了做文字环绕才使用到浮动，后来有人发现用它来做布局也挺不错啊，但是，用到了...
html清除浮动的几种方式
zjbkzj的博客
05-19 1万+
方法一（使用空标签带clear属性）标签可以是div br　hr 在浮动元素后使用一个空元素如， 并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用 或来进行清理。 优点：简单，代码少，浏览器兼容性好。 缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。 在浮动元素下加   .clear{ height:0px;fon
css清除浮动float的七种常用方法总结和兼容性处理
热门推荐
PromiseCao的博客
10-09 4万+
7、万能清除法 **after伪类** 清浮动（现在**主流**方法，**推荐使用**） ``` 选择符:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden;
使用jQuery实现Div浮动层查询功能
在这个例子中，我们看到一个与JavaScript交互的Div浮动层，用于展示查询结果。 首先，有一个`div`元素，它的ID是"ts"，这是用来存放查询结果的浮动层。接着，有一个`input`元素，当用户在其中输入时，会触发`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值