h5添加标签浮动

该博客探讨了HTML5中浮动元素(如float:left或float:right)对页面布局的影响,包括元素脱离文档流、兄弟元素位置变化和父级元素高度不被撑开的问题。文章提供了两种解决方法:一是使用overflow:hidden清除浮动;二是使用clear:left或clear:right。通过实例代码展示了如何应用这两种方法,以保持布局的正常显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  在第一次的文章中我已经想大家介绍了行块标签的特性,其中块标签具有独占一行的特性,但是很多时候我们需要让几个标签共用一行,但行标签又不能做到这点;因此就出现了今天我要为大家讲解的内容,即浮动;以下是我通过代码的方式向大家展示浮动的特性,同时在最后的代码中为大家做了一下总结;

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.div1{

width: 200px;

height: 200px;

background-color: red;

margin: 10px;

/*添加左浮动*/

float: left;

/*float: right;*/

}

.div2{

width: 200px;

height: 200px;

background-color: cyan;

margin: 10px;

float: left;

/*float: right;*/

    }

    .div3{

        width: 200px;

height: 200px;

background-color:orange;

margin: 10px;

float: left;

/*float: right;*/

    }

    .father{

    width: 700px;

    margin: 0 auto;

    }

    /*

    浮动元素的核心思想

    1.浮动会让标签的布局脱离原来默认的文档流布局方式;

    2.浮动会让块元素失去独占一行的特性,在浮动这一层的标签可以共用一行;

    3.浮动标签后面布局的标签会忽略浮动标签原来所占据的空间;

    4.浮动元素(只要一个标签加了一个float,他就叫浮动标签或浮动元素);

    5.浮动元素默认内容撑开宽高;

    6.浮动元素标签会发生层叠,但内容不会。

  */

</style>

</head>

<body>

<div class="father">

<div class="div1">我是div1</div>

<div class="div2">我是div2</div>

<div class="div3">我是div3</div>

</div>

</body>

</html>



  但浮动会让块标签脱离原来默认文档流,即浮了起来,对其他没有浮动的标签产生影响,例如,让其兄弟标签自动占据它原先没有浮动时的位子,也会让他的父级标签不能被自动撑开高度,因为浮动标签已经没有高度了如何解决呢?以下时我的解决方法:

    1.解决父子之间的浮动问题

     方法一:浮动清浮动;

     方法二:overflow: hidden;清浮动。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.father{

width: 200px;

margin: 0 auto;

border: 10px solid black;

方法一:/*overflow: hidden;*/

方法二:/*float: left;*/

}

.one{

width: 100px;

height: 100px;

background-color: red;

float: left;

}

.two{

width: 100px;

height: 100px;

background-color: blue;

float: left;

}

.three{

width: 100px;

height: 100px;

background-color: green;

float: left;

}

.four{

width: 100px;

height: 100px;

background-color: yellow;

float: left;

}

</style>

</head>

<body>

<div class="father">

<div class="one">1</div>

<div class="two">2</div>

<div class="three">3</div>

<div class="four">4</div>

</div>

</body>

</html>

 2.兄弟间浮动

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

.div1{

width: 200px;

height: 200px;

background-color: red;

float: left;

}

.div2{

width: 200px;

height: 200px;

background-color: blue;

float: left;

}

.div3{

width: 200px;

height: 300px;

background-color: yellow;

clear: left;

}

</style>

</head>

<body>

<div class="div1"> </div>

<div class="div2"></div>

<div class="div3"></div>

</body>

</html>

   (1)兄弟间未清浮动前如下:


(2)清完兄弟间浮动后如上:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值