清除浮动

最新推荐文章于 2018-07-17 17:08:38 发布
最新推荐文章于 2018-07-17 17:08:38 发布
阅读量106 收藏
点赞数
分类专栏： css知识点 文章标签： 清除浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79201073
版权
<!DOCTYPE html >
< html >
< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >清除浮动 </ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< link rel= "stylesheet" type= "text/css" media= "screen" href= "main.css" />
< script src= "main.js" > < / script >
< style >
.content{
                 width: 500px;
                 /* height: 300px; */
                 background-color: pink;

                 /* overflow:hidden; */ /* 清除浮动方式二
给父盒子设置overflow:hidden
如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。*/
             }

             .left{
                 width: 200px;
                 height: 300px;
                 background-color: #CC12F2;
                 float: left;
             }

             .right{
                 width: 300px;
                 height: 300px;
                 background-color: #1CCBEA;
                 float: left;
             }

             .footer{
                 height: 50px;
                 width: 500px;
                 background-color: black;
             }
/* 清除浮动方式一 */

             /* .clearfix{
                 clear: both;
             } */

/* 清除浮动方式三
这个是最好的一种清除浮动的方法
*/
            
.clearfix:after{
             content: "";
                 /* display: block; 块级显示 */
                 clear: both;
                 height: 0;
                 line-height: 0;
                 visibility: hidden;
             }
             .clearfix{
                 zoom: 1; /* 为了兼容IE浏览器 */
             }




< / style >




</ head >
< body >

<!-- 清除浮动
☞清除浮动不是删除浮动
☞清除浮动指的是清除浮动的影响
注意：
当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。这种情况下进行清除浮动。 -->

         < div class= "content clearfix" >
<!-- 只需要在父级里面填加类就可以了 -->
< div class= "left" ></ div >
< div class= "right" ></ div >
< div class= "clearfix" ></ div >
</ div >
< div class= "footer" ></ div >
</ body >
</ html >
御裔宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浮动从何而来 我们为何要清除浮动 清除浮动的原理是什么
09-25
因此，我们需要“清除浮动”或者说“闭合浮动”，以确保容器能够正确包裹其内的浮动元素。常见的清除浮动方法包括： 1. 添加额外的标签：在浮动元素后面插入一个带有`clear:both`样式的空`div`，这样可以创建一个新...
清除浮动的几种方式
yibashou的博客
01-29 130
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>清除浮动title> meta name="viewport" content="width=device-width, initial-scale=
CSS清除浮动的五种方式
Manson_zh的博客
07-04 1192
浮动元素会影响整体的布局，但是有些情况又不得不让元素浮动来更好的构成页面，下面整理五种常用的清楚浮动的方法： （注：为了节省时间，将方法写在了class名内，看懂即可） 1，为父元素添加高度： class="float_left">左 height:200px class="float_right">右 height:200px 如上简写，只需给父元素设置heigh
清除浮动有哪些方式？比较好的方式是哪一种？
dianpi2993的博客
08-29 2481
清除浮动有哪些方式？比较好的方式是哪一种？(Q1)（1）父级div定义height。（2）结尾处加空div标签clear:both。（3）父级div定义伪类:after和zoom。（4）父级div定义overflow:hidden。（5）父级div定义overflow:auto。（6）父级div也浮动，需要定义宽度。（7）父级div定义display:table。（8）结尾处加br标签c...
CSS的clear属性清除浮动的基本用法示例
09-24
清除浮动是指通过CSS样式来防止浮动元素对周围元素的影响，确保非浮动元素或后续元素能够正确地在页面上定位，避免内容溢出容器。这通常是为了恢复父容器的正常高度计算，使其能完全包裹住内部的浮动元素。 **使用`...
css 怎么清除浮动
09-25
标题中的“css 怎么清除浮动”是一个关于CSS布局中常见的问题，特别是在处理浮动元素时。浮动元素会导致其父元素的高度塌陷，因此需要清除浮动以保持布局的正常显示。描述部分提到的站点更新、JS压缩等是网站优化的...
CSS 清除浮动Clear
09-25
当我们提到“CSS 清除浮动Clear”时，我们实际上是在讨论如何解决由于浮动元素导致的布局问题。 在上述例子中，红色方块通过设置`float: left;`使其浮动到左侧，从而允许蓝色方块与其在同一行。这种布局方式在多列...
css如何清除浮动常用的方法有哪些
09-25
在CSS布局中，浮动元素（float）经常被用于创建多列布局、图像对齐等，但浮动元素会导致其父元素的塌陷，即父元素无法完全包含浮动子元素，这通常需要我们采取措施来清除浮动。以下是三种常用的清除浮动方法： 1. *...
背景图片的精灵图的使用
yibashou的博客
02-11 3407
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;背景图片的精灵图的使用&lt;
使用css技术美化网页
yibashou的博客
07-17 3001
1、引入css的代码有内行式与外联式的标签。 &lt;标记名 style=“属性1：属性1值；属性2：属性2值；”&gt;内容&lt;/标记名&gt;         标记名就是标签的名字 2、引入css的内嵌式的方式 &lt;head&gt; &lt;title&gt;标题&lt;/title&gt; &lt;style type="text/css"&gt; 选择器{属性1：属
小米的首页官网
yibashou的博客
02-11 1065
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;小米的官网首页&lt;/tit
图片与文字的垂直对齐
yibashou的博客
02-11 1007
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;图片与文字垂直对齐&lt;/t
owerflow的滚动条
yibashou的博客
02-01 675
DOCTYPE html> html lang="en"> head> meta charset="utf-8"> style type="text/css">             div{                  width: 300px;                  height: 300px;                 
网页布局的简单案例
yibashou的博客
01-29 666
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>网页布局title> meta name="viewport" content="width=device-width, initial-scale=
css的伪类的超链接的颜色变化处理
yibashou的博客
01-24 552
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>超链接默认状态下的样式title> meta name="viewport" content="width=device-width, initial
css超链接的案例
yibashou的博客
01-24 432
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>css的超链接导航条的案例title> meta name="viewport" content="width=device-width, initi
Html标签的分类
yibashou的博客
01-23 342
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>Page Titletitle> meta name="viewport" content="width=device-width, initial-
浮动的简单例子
yibashou的博客
01-29 328
DOCTYPE html> html> head> meta charset="utf-8" /> meta http-equiv="X-UA-Compatible" content="IE=edge"> title>浮动的变化title> meta name="viewport" content="width=device-width, initial-scale
网页的第二种复杂的布局
yibashou的博客
01-29 325
DOCTYPE html> html lang="en"> head> meta charset="utf-8"> style type="text/css">             *{                 margin: 0;                 padding:0;             }             

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值