HTML标签4(浮动)
2019-12-06 本文已影响0人
Dxes
通过设置标签的float属性,可以让标签浮动
left:左浮动,浮动后标签靠左显示
right:右浮动,浮动后标签靠右显示
2.什么时候使用浮动
浮动可以让竖着显示的横着显示;还可以让标签靠右显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>==========1.浮动会导致脱流==========</h1>
<div id="" style="height: 250px;">
<p style="background-color: chartreuse; height: 40px; float: left;">我是段落1</p>
<p style="background-color: red; float: left;">我是段落1</p>
<a style="background-color: yellow; height: 40px; float: left;">这是链接1</a>
</div>
<h1>==========2.浮动会导致脱流==========</h1>
<div id="" >
<p style="background-color: rosybrown; float: left;">我是段落1</p>
<p style="background-color: red;float: right;">我是段落2</p>
<p style="background-color: yellow; float: left;">我是段落3</p>
<p style="background-color: #0000FF; float: right;">我是段落4</p>
<p style="background-color: palevioletred; float: left;">我是段落5</p>
</div>
</body>
</html>