为了账号安全,请及时绑定邮箱和手机立即绑定

css float属性

css float属性

慕先生4543078 2017-06-19 11:11:05
<div></div> <div></div> <div></div> <div></div>div{     width: 100px;     height: 100px;     background: red;     margin: 5px; } div:nth-of-type(2){     float: left; }结果我本来是想让第二个、第三个<div>并列,水平拉开5px对齐。我有几个问题:1、为什么第二个<div>加了float:left后margin都没了?2、按理说第三个<div>应该是排在第二个<div>后面的,并且拉开5px的margin的,这个和第二个<div>的外边距没什么关系,为什么会和第二个重叠了?而且加了float属性后似乎上边距消失了,这是为什么?3、我想让第一个占一行,第四个占一行,第二、第三占一行,第二个和第三个并列应该怎么写css?
查看完整描述

1 回答

已采纳
?
李晓健

TA贡献1036条经验 获得超461个赞

1: 第二个<div>加了float:left后margin是有的。

2:因为第二个设置了浮动,所以他会脱离文档流,就会盖在第三个的上面

3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 div{
 width: 100px;
 height: 100px;
 margin: 5px;
 }
 div:nth-of-type(2),div:nth-of-type(3){
 display: inline-block;
 }

 </style>
</head>
<body>
<div style="background-color: #00a854"></div>
<div style="background-color: red"></div>
<div style="background-color: blue"></div>
<div style="background-color: yellow"></div>
</body>
</html>


查看完整回答
反对 回复 2017-06-19
  • 慕先生4543078
    慕先生4543078
    感谢你的回答,关于第二点我还有个不明白的地方:第二个<div>设置了float属性后,脱离文档流,那不应该是从头排起吗(即覆盖到第一个<div>,从文档的初始位置开始)。这个“脱离文档流”是以什么为标准来定位的?
  • 李晓健
    李晓健
    浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框。 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素。内联元素:有空隙就插入。
  • qq_刮开有奖_0
    qq_刮开有奖_0
    float只对后边元素有影响,是不会盖到前边元素上的
  • 1 回答
  • 1 关注
  • 2696 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信