父元素div清除浮动的三种方式

第一种做法：

父元素也设置：浮动

<style>

　　div.b{

　　　　float:left;

　　}

　　div.c{

　　　　float:left;

　　　　width:250px;

　　　　height:100px;

　　}

　　div.d{

　　　　float:right;

　　　　width:250px;

　　　　height:100px;

　　}

</style>

</div>

第二种做法：在最后添加一个空标签

<style>

　　div.c{

　　　　float:left;

　　　　width:250px;

　　　　height:100px;

　　}

　　div.d{

　　　　float:right;

　　　　width:250px;

　　　　height:100px;

　　}

</style>

</div>

第三种做法：给父元素添加清楚浮动

<style>

　　div.b:after{

　　　　content:‘.‘;

　　　　display:block;

　　　　height:0px;

　　　　clear:both;

　　　　visibility:hidden;

　　}

　　div.c{

　　　　float:left;

　　　　width:250px;

　　　　height:100px;

　　}

　　div.d{

　　　　float:right;

　　　　width:250px;

　　　　height:100px;

　　}

</style>

</div>

三种方式收藏日后使用

时间： 2024-12-24 16:39:23

父元素div清除浮动的三种方式的相关文章

css清除浮动的三种方式

1.父级元素结束之前加入空div,div的样式中有“clear:both” 2.父级元素设置样式"overflow:hidden".原因:“为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动.Css overflow:hidden清除浮动方法DIVCSS5推荐使用.” 3.父级元素设置class样式"clearfix"

清除浮动的三种方式

1.设置父级高度这个方法比较死板,不推荐 2.在父级标签结束之前,添加一个带有clear:both属性的标签,如<div style="clear:both;"></div> 这个方法会导致添加很多多余无意义的html标签 3.在父级属性中添加override:hidden 添加了override:hidden属性,相当于让父级紧贴内容,这样即可紧贴其对象内内容,推荐使用此方法

清除浮动的四种方式及其原理理解

清除浮动的四种方式及其原理理解本文介绍了四种清除浮动的方法,并尝试解释其原理.在理解了各种清除浮动的原理之后,你会发现,很多清除浮动的方法本质上其实是一样的.掌握这些原理,相信你可以根据场景和需求,灵活运用原则发展出不同的清除浮动的方法,而不再死记或拘泥于文中提到的方法. 一.为什么要清除浮动在讲清除浮动的方法之前,我们先来了解一下为什么要清除浮动,清除浮动的目的是什么,即,要解决什么样的问题.来看一个浮动的例子(略去了文字内容): <div class="topDiv"&g

【css】清除浮动的几种方式

[css]清除浮动的几种方式因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: 1 .news { 2 background-color:gray; 3 border:1px solid black; 4 } 5 .news img { 6 float:left; 7 } 8 .news p { 9 float:right; 10 } 11 <divclass="news"> 12 <imgsrc="/img/news-pic.jgp"

html 清除浮动的几种方式

清除浮动的几种方式? 答:1,父级 div 定义 height 原理:父级 div 手动定义height,就解决了父级 div 无法自动获取到高度的问题. 简单.代码少.容易掌握 ,但只适合高度固定的布局. 2,结尾处加空 div 标签 clear:both 原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感觉很不好 . 3,父级 div 定义伪类:

CSS清除浮动的几种方式

浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除(不要在浮动元素上清除浮动),不然浮动会造成父元素高度坍塌,同时浮动会脱离文档流,对整个页面布局有很大的影响方式一:使用overflow属性来清除浮动 .ovh{ overflow:hidden; } 先找到浮动盒子的父元素,再在父元素中添加一个属性:overflow:hidden,就是清除这个父

CSS 清除浮动的几种方式

第一种方式: 因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid black; } .news img { float:left; } .news p { float:right; } <div class="news"> <img src="/img/news-pic.jgp" alt="my pic" /> &l

清除div浮动的三种方式

html: <body> <div class="main"> <div class="first"></div> <div class="second"></div> </div> </body> <style> .main { overflow:hidden; border:1px solid black; } .first{ widt

CSS清除浮动的三种方法，很实用

CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一. 下面看今天的教程,此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景. <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;}