Home > Web Front-end > HTML Tutorial > Why float:left; has no effect_html/css_WEB-ITnose

Why float:left; has no effect_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:42:35
Original
2052 people have browsed it

I just started learning html today, but float:left; has no effect. I don’t know where I went wrong.


<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css--4</title></head><style type="text/css">div.a{      background:##CCFFFF;	  width:100px;	  height:25px;	  border:5px 15px solid #CCFFCC;	  margin:1px 2px;	  text-align:center;	  color:#999999;	  font-size:15px;	  line-height:22px;	  font-weight:bold;	  float:left;	  }	    div.b{      background:#CCFFFF;	  width:1100px;	  height:25px;	  border:5px solid #CCFFCC;	  margin:1px 2px; }</style><body><div class="a">首页</div><div class="b"></div></body></html>
Copy after login





Reply to discussion (solution)

Browser-based

width:1100px; Don’t want this

width:1100px; Don’t want this


Thank you, just remove it, but you can Can you tell me why it's better to remove it? I don't quite understand. . .


width:1100px; This is not necessary


Thank you, it is indeed good to remove it, but can you tell me why it is better to remove it? I Don't quite understand. . .
Because the default value of the width attribute of the display:block block is auto, it automatically fills the entire line.
float will occupy part of the current line. If the next blockl is auto, it will try to fill the current line ( If the content width does not exceed the remaining part of the current line)

The above is very general
You have to find the information yourself for the details. It is actually more complicated


width:1100px; You don’t want this


Thank you, it’s true that it’s fine if you remove it, but can you tell me why it’s fine if you remove it? I don’t quite understand. . . Thank you, I’ll take a look myself,,,,
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template