How to Clear the CSS Style "Float"

How to Clear float for ul

Instead of float: left;, use display: inline-block; on your ul.wrapper.

https://jsfiddle.net/EyNnk/460/

For new lines between elements, use display: table-cell; for your ul.wrapper. Instead of making your li { float: left; }, use display: inline-block;. To avoid unwanted whitespace issues, set the parent's font-size: 0; and reset to the font-size you need on the li.

https://jsfiddle.net/EyNnk/464/

CSS: Float over a clear

Try this:

<div style="float:right;height:0;">Mine</div>
<div style="clear:both;">Theirs now</div>
<div style="height:50px" id="blankspaceforstackoverflow"></div>
<div style="float:right">Mine</div>
<div>Where I want this item, without changing its css.</div>

In your div, add:

height:0;

div's will naturally resize in accordance with their content.

An exception to this rule is when the div contains floating elements. If this is the case you'll need to do a bit extra to ensure that the containing div clears the floats. You could use the clearfix method to do so.

More info

JSFiddle Demo

What does the CSS rule clear: both do?

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

Sample Image

Live Example of the demo image.

Code For Demo

/*  CSS:  */
* { /* Not related to floats / clear both, used it for demo purpose only */    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}
header, footer {    border: 5px solid #000;    height: 100px;}
aside {    float: left;    width: 30%;    border: 5px solid #000;    height: 300px;}
section {    float: left;    width: 70%;    border: 5px solid #000;    height: 300px;}
.clear {    clear: both;}
<!-- HTML --><header>    Header</header><aside>    Aside (Floated Left)</aside><section>    Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div class="clear"></div><footer>    Footer</footer>

Reset/remove CSS styles for element only

The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families.

Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

/* basic modern patch */

#reset-this-root {
    all: initial;
    * {
        all: unset;
    }
}
  • Relevent github repo with a december 2017 more exaustive list
  • Related
  • Related from MDN
  • Related W3C specs

As mentioned in a comment by @user566245 :

this is correct in principle, but individual mileage may vary. For
example certain elements like textarea by default have a border,
applying this reset will render those textarea's border less.

JAVASCRIPT ?

Nobody thought about other than css to reset css? Yes?

There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310

getElementsByTagName("*") will return all elements from DOM. Then you
may set styles for each element in the collection:

answered Feb 9 '13 at 20:15 by VisioN

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.

For comparison, here is Firefox 40.0 values list for a
<blockquote style="all: unset;font-style: oblique"> where font-style: oblique triggers DOM operation.

align-content: unset;
align-items: unset;
align-self: unset;
animation: unset;
appearance: unset;
backface-visibility: unset;
background-blend-mode: unset;
background: unset;
binding: unset;
block-size: unset;
border-block-end: unset;
border-block-start: unset;
border-collapse: unset;
border-inline-end: unset;
border-inline-start: unset;
border-radius: unset;
border-spacing: unset;
border: unset;
bottom: unset;
box-align: unset;
box-decoration-break: unset;
box-direction: unset;
box-flex: unset;
box-ordinal-group: unset;
box-orient: unset;
box-pack: unset;
box-shadow: unset;
box-sizing: unset;
caption-side: unset;
clear: unset;
clip-path: unset;
clip-rule: unset;
clip: unset;
color-adjust: unset;
color-interpolation-filters: unset;
color-interpolation: unset;
color: unset;
column-fill: unset;
column-gap: unset;
column-rule: unset;
columns: unset;
content: unset;
control-character-visibility: unset;
counter-increment: unset;
counter-reset: unset;
cursor: unset;
display: unset;
dominant-baseline: unset;
empty-cells: unset;
fill-opacity: unset;
fill-rule: unset;
fill: unset;
filter: unset;
flex-flow: unset;
flex: unset;
float-edge: unset;
float: unset;
flood-color: unset;
flood-opacity: unset;
font-family: unset;
font-feature-settings: unset;
font-kerning: unset;
font-language-override: unset;
font-size-adjust: unset;
font-size: unset;
font-stretch: unset;
font-style: oblique;
font-synthesis: unset;
font-variant: unset;
font-weight: unset;
font: ;
force-broken-image-icon: unset;
height: unset;
hyphens: unset;
image-orientation: unset;
image-region: unset;
image-rendering: unset;
ime-mode: unset;
inline-size: unset;
isolation: unset;
justify-content: unset;
justify-items: unset;
justify-self: unset;
left: unset;
letter-spacing: unset;
lighting-color: unset;
line-height: unset;
list-style: unset;
margin-block-end: unset;
margin-block-start: unset;
margin-inline-end: unset;
margin-inline-start: unset;
margin: unset;
marker-offset: unset;
marker: unset;
mask-type: unset;
mask: unset;
max-block-size: unset;
max-height: unset;
max-inline-size: unset;
max-width: unset;
min-block-size: unset;
min-height: unset;
min-inline-size: unset;
min-width: unset;
mix-blend-mode: unset;
object-fit: unset;
object-position: unset;
offset-block-end: unset;
offset-block-start: unset;
offset-inline-end: unset;
offset-inline-start: unset;
opacity: unset;
order: unset;
orient: unset;
outline-offset: unset;
outline-radius: unset;
outline: unset;
overflow: unset;
padding-block-end: unset;
padding-block-start: unset;
padding-inline-end: unset;
padding-inline-start: unset;
padding: unset;
page-break-after: unset;
page-break-before: unset;
page-break-inside: unset;
paint-order: unset;
perspective-origin: unset;
perspective: unset;
pointer-events: unset;
position: unset;
quotes: unset;
resize: unset;
right: unset;
ruby-align: unset;
ruby-position: unset;
scroll-behavior: unset;
scroll-snap-coordinate: unset;
scroll-snap-destination: unset;
scroll-snap-points-x: unset;
scroll-snap-points-y: unset;
scroll-snap-type: unset;
shape-rendering: unset;
stack-sizing: unset;
stop-color: unset;
stop-opacity: unset;
stroke-dasharray: unset;
stroke-dashoffset: unset;
stroke-linecap: unset;
stroke-linejoin: unset;
stroke-miterlimit: unset;
stroke-opacity: unset;
stroke-width: unset;
stroke: unset;
tab-size: unset;
table-layout: unset;
text-align-last: unset;
text-align: unset;
text-anchor: unset;
text-combine-upright: unset;
text-decoration: unset;
text-emphasis-position: unset;
text-emphasis: unset;
text-indent: unset;
text-orientation: unset;
text-overflow: unset;
text-rendering: unset;
text-shadow: unset;
text-size-adjust: unset;
text-transform: unset;
top: unset;
transform-origin: unset;
transform-style: unset;
transform: unset;
transition: unset;
user-focus: unset;
user-input: unset;
user-modify: unset;
user-select: unset;
vector-effect: unset;
vertical-align: unset;
visibility: unset;
white-space: unset;
width: unset;
will-change: unset;
window-dragging: unset;
word-break: unset;
word-spacing: unset;
word-wrap: unset;
writing-mode: unset;
z-index: unset;

CSS: How to clear a floating object only one level, not the all the way to the left?

Set lower width to parent, 

#parent {width: 200px;}

http://jsfiddle.net/db0xacps/1/

Or wrap right elements, styles will be the same as you have.

<div id="parent">
     <div id="object1"></div>  
     <div>
         <div id="object2"></div>
         <div id="object3"></div>
    </div>
</div>

http://jsfiddle.net/db0xacps/2/

CSS Clear Float not working with Media Queries

Apply your clearfix on the container and not the floated elements. Here you should apply the clearfix on #holder (although I would advice adding a class and targeting it instead of an id, I used container here).

/* main navigation on small screens like smartphones */
#main_nav {  position: sticky;  top: 0;  text-align: center;  box-shadow: 0 0 1.563rem 0;}
#main_nav ul {  margin: 0;  padding: 0;  background-color: #1f1f14;  border-top: 0.0625rem solid #faf352;}
#main_nav ul li {  list-style-type: none;  display: inline-block;  margin: 0.625rem 0;  width: 22%;  padding: 0;  text-align: center;}
#main_nav ul li a {  padding: 0.2rem;  color: #D7D7CF;  font-family: 'Finger Paint';  font-size: 0.7rem;  text-decoration: none;}

/* main container on small screens */
main {  padding: 0.2rem 0.5rem 0 0.5rem;}
/* large desktop screens - more than 1000px width */
@media screen and (min-width: 62.500em) {
  #main_nav {    position: static;    float: left;    width: 20%;    padding: 1rem;    box-shadow: none;  }
  #main_nav ul li {    width: 100%;    padding: 0.5rem;    display: block;  }
  #main_nav ul li a {    display: inline-block;    width: 90%;    font-size: 0.9rem;    margin: 0.2rem;    padding: 0.3rem;  }
  main {    width: 95%;    float: left;    padding: 0 1rem;  }
  /* clear float */
  .container:after {    content: "";    display: table;    clear: both;  }}
<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>page title</title>  <link href="mystyles.css" rel="stylesheet" type="text/css"></head>
<body>  <div id="holder" class="container">
    <header id="page_header">      <h1><span class="yellow">This is</span> a heading</h1>    </header>
    <nav id="main_nav" class="cf">      <ul>        <li><a href="#">link one</a></li>        <li><a href="#">link two</a></li>        <li><a href="#">link three</a></li>        <li><a href="#">link four</a></li>      </ul>    </nav>
    <main class="cf">      <section>        <article>          <h3>This is an awesome heading</h3>          <p>text</p>          <img src="images/st-color-300px.jpg" alt="picture">          <p>text</p>        </article>      </section>    </main>  </div></body>
</html>

css - clear floats doesn't work

I think the problem is that the 'secondary' element isn't contained within the 'content' element' on your site so obviously 'content' won't grow to accomodate 'secondary'.

You need to have a rethink of your html structure.


Related Topics

How to Make Google Fonts Work in Ie

Add a CSS Class to a Field in Wtform

How to Use Two CSS3 Box Shadows on One Element

Padding-Bottom/Top in Flexbox Layout

CSS Selector for Nth Range

Responsive Images with CSS

CSS Rotate a Pseudo :After or :Before Content:""

How to Center an Image If It's Wider Than Its Container

Css: Fixed to Bottom and Centered

Complete Styles for Cross Browser CSS Zoom

Filter: Blur(1Px); Doesn't Work in Firefox, Internet Explorer, and Opera

CSS Transition Auto Height Not Working

Safari/Chrome (Webkit) - Cannot Hide Iframe Vertical Scrollbar

IE7 Relative/Absolute Positioning Bug with Dynamically Modified Page Content

Bootstrap Element 100% Width

Defining Variable Variables Using Less CSS

Differencebetween Pipe (|) and Caret (^) Attribute Selectors

How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS


Leave a reply



Submit