防止父元素坍塌的清楚浮动clear

如果父元素没有设置高度，其中子元素全部带float属性，父元素内部将没有任何普通流元素而坍塌。

想要解决这件事情，只需添加一个空的块状子元素，并设置clear属性，即可让父元素自动包裹该元素，

从而达到包裹所有浮动子元素的目的。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<style>
  .container{
      margin:30px auto;
      width:600px;
      height:300px;
      border-style:dotted
  }

  .p{
      border:solid 3px red;
  }

  .c{
      width:100px;
      height:100px;
      background-color:green;
      margin:10px;
      float:left;
  }

  /* 利用伪类实现清楚浮动 */
  .p:after{
      content:"";
      display:block;
      clear:left;
  }
</style>
<body>
    <div class="container">
        <div class="p">
            <div class="c"></div>
            <div class="c"></div>
            <div class="c"></div>

  /* 也可以追加一个div来实现清楚浮动 原理是一样的，都是新加一个块级元素来清楚浮动，让父元素包裹自己 */

<div style="clear:left"></div>

        </div>
    </div>
</body>
</html>

效果如下：

时间： 2024-11-25 19:24:27

防止父元素坍塌的清楚浮动clear的相关文章

清除盒子内子元素浮动导致父元素塌陷的5种方法

更详细的解释请移动到: 地址1:http://www.cnblogs.com/chedabang/p/5973601.html 地址2:https://www.cnblogs.com/libin-1/p/5975367.html 盒子塌陷是什么? 何为盒子塌陷,盒子塌陷是由于子元素浮动导致的子元素脱离标准文档流,父元素无法获取子元素的高度而出现的一种现象. 盒子塌陷(如下): 盒子未塌陷(如下): HTML/CSS代码 .... // css .box-wrapper { border: 5

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

第一种做法: 父元素也设置:浮动 <style> div.b{ float:left; } div.c{ float:left; width:250px; height:100px; } div.d{ float:right; width:250px; height:100px; } </style> <div class="b"> <div class="c"></div> <div class=&

父元素如何围住浮动子元素

当元素使用float属性,将脱离文档流,因此父元素便不会包围它. <section> <div class="左栏"> 我是左栏我是左栏我是左栏我是左栏 </div> <div class="右栏"> 我是右栏 </div> </section> <footer>我是页脚</footer> CSS样式如下: section{ border: 1px solid #3

子元素使用float 父元素撑开方法

一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 1 <style>2 #div1{border:1px solid red;float:left;}3 #div2,#div3{float:right;border:1px solid blue;}4 </style>5 6 <div id="div1">7 <div id="div2">two</

CSS子元素浮动之后如何撑开父元素

(1)在浮动子元素后面添加 <div style="clear:both;"></div> (2)父元素CSS添加 z-index:1; overflow:hidden; (3)绝对定位/静止定位(absolute/fixed); (4)父元素也跟着浮动 (5)父元素设定高度 (6)最佳方案: 父元素CSS添加: overflow:auto;_height:1%;

解决float浮动定位时父元素的高度为0的情况

首先我想实现这样一个效果: 我设置一个<div class="content"></div>背景为黄色,然后在其中设置两个div分别为<div class="left"></div> ,<div class="right"></div>分别设置左浮动,背景颜色蓝色和右浮动背景颜色红色代码如下: <!DOCTYPE html><html><head

子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

方法一: html: <div id="all1"> <div id="left1">1</div> <div id="left2">1</div> <div style=" clear:both; "></div> </div> css: #left1{ float:left;width:200px;} #left2{ float

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子  <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

子元素浮动后,父元素高度自动增加

father:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; } 清除"闭合(清除)浮动"的方法,主要是一下四种: 1. 额外标签法这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签.我个人不喜欢这种方法,但是它确实是W3C推荐的方法