Understanding floats and how and when to place an element in CSS3?
I cannot qualify for this property. First, I will tell you what knowledge I have regarding this. I am focusing on item <p>
c id="amazing"
for this thread.
Now I give it width
#amazing{
width: 200px
}
Result:
Since the paragraph is a block element, therefore, no elements will move next to it, because all block elements have line breaks before and after them.
Now I am floating on it:
#amazing{
width: 200px;
float: right
}
My understanding prior to this part:
(1) First, the browser loses the elements on the page as usual, starting at the top of the file and moving to the bottom position (2) When the browser encounters a floating element, it pushes it all the way to the right, it also removes the paragraph from the stream, exactly the same the way it floats on the page
Correct me if I am wrong so far ...
Next,
Float property with CSS dropdown menus
Consider this snippet taken from the internet: an
unordered list with list items like this
<ul id="menu">
<li>
<a href="">Home</a>
</li>
<li>
<a href="">About Us</a>
<ul id="menu-about-us">
<li>
<a href="">The Team</a>
</li>
<li>
<a href="">History</a>
</li>
<li>
<a href="">Vision</a>
</li>
</ul>
</li>
<li>
<a href="">Products</a>
<ul>
<li>
<a href="">Cozy Couch</a>
</li>
<li>
<a href="">Great Table</a>
</li>
<li>
<a href="">Small Chair</a>
</li>
<li>
<a href="">Shiny Shelf</a>
</li>
<li>
<a href="">Invisible Nothing</a>
</li>
</ul>
</li>
<li>
<a href="">Conatct</a>
<ul>
<li>
<a href="">Online</a>
</li>
<li>
<a href="">Right Here</a>
</li>
<li>
<a href="">Somewhere Else</a>
</li>
</ul>
</li>
</ul>
Now if I do this,
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
/*list-style: none;*/
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
For ul li is not visible : the block will make them behave like block elements, but I see them as inline elements as shown in the picture. What good does the float property do here?
ul li {
display: block;
position: relative;
float: left;
}
I seem to be too perplexed. Please help me ... It would be better if someone cleared up this concept in the context of how float would behave with block and inline elements.
source to share
It depends on the scenario and what you would like to achieve with Shirgill. I have prepared a quick comparison for you on the JS Fiddle -> http://jsfiddle.net/Lt7cftyc/
You're right. List behavior when customizing display: inline-block; a list with a float attribute is very similar:
ul li {
display:inline-block;
}
will behave similarly:
ul li {
display:block;
float:left;
}
but there are some differences. For example, you should always clear floated items to prevent unexpected behavior:
clear:both;
In my example below, you can see various inline and floating menu scripts. You can play with it and see how it behaves when you add margins or paddings for the inline element and for the floated element. You will be surprised.
ul.inline li {
display:inline-block;
}
ul {
font-size:14px;
font-family: Arial;
border: 1px solid black;
background: lightblue;
margin: 20px 0;
}
ul li {
padding: 0 5px;
}
ul.floated2 {
height: 20px;
}
ul.floated li, ul.floated2 li {
display:block;
float:left;
}
.clr {
clear:both;
}
<p>This is example of inline list</p>
<ul class="inline">
<li>menu 1</li>
<li>menu 2</li>
<li>menu3</li>
</ul>
<br />
<p>This is example of floated list. Note that there is no backgroud - first difference!</p>
<ul class="floated">
<li>menu floated 1</li>
<li>menu floated 2</li>
<li>menu floated3</li>
</ul>
<br />
<p>This is example of floated list. The background is visible, but after I set height:20px;. </p>
<ul class="floated2">
<li>menu floatedSecond Version 1</li>
<li>menu floated 2</li>
<li>menu floated3</li>
</ul>
source to share