Answers for "float css"

CSS
12

float none css

.titanic {
  		float: none;
}
Posted by: Guest on April-29-2021
3

css float property

/* 
  Nowadays with flex and grid, float has no chance to be putted inside your code
  But just for the knowledge of using this property.
  ===========================NOTICE===========================
    you should use the 'clear' CSS property after the div that has the float prop 
  ===========================NOTICE===========================
*/
.div-1{
  float: left;
  width: 50%;
  background-color: #f00;
}
/* 
  after applying float i used clear: both
  try this code and remove the clear property and see what will be happened
*/
.clear-float{
  clear: both;
}
.div-2{
  float: left;
  width: 50%;
  background-color: #00f;
}
.clear-float{
  clear: both;
}
/* div-1 and div-2 will now be at the side of each other*/
/*
  ==========HTML Layout==========
  <div class="div-1">DIV 1</div>
  <div class="clear-float"></div>
  <div class="div-2">DIV 2</div>
  <div class="clear-float"></div>
*/
Posted by: Guest on June-12-2021
0

html code to float image right

<!DOCTYPE html>
<html>
<body>

<h2>Floating Images</h2>
<p><strong>Float the image to the right:</strong></p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
</p>

<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.  
</p>

</body>
</html>
Posted by: Guest on April-30-2020
3

how to clear floats

This is the code 

.float-wrapper::after {
  content: "";
  clear: both;
  display: block;
}
---------------------------------------------------------------
Explanation:

.float-wrapper -> is some parent element that wraps the floating items

example:
<div class='float-wrapper'>
     <div class='floating-item'> </div>
     <div class='floating-item'> </div> 
     ....
 </div>

::after  adds  an element after the .float-wrapper, that 
has no content and clears floats from the both sides, making sure, 
other sections are not affected by floats
Posted by: Guest on March-25-2020
5

css floaat

.myelement {
	float: left;
}
Posted by: Guest on April-14-2020
1

float css

who uses floats?! (for beginners: use flexbox and grid)
Posted by: Guest on August-17-2021

Browse Popular Code Answers by Language